HTML5+CSS3前端入门教程

1、html5+css3前端入门教程这就是一个无序列表（）里有三个列表元素（）。你可以把称为父元素，称为子元素。要开头用法flexbox，必需先让父元素变成一个flex容器。你可以在父元素中显式的设置或者。这样你就可以开头用法flexbox模块。实际是显式声明白flex容器之后，一个flexbox格式化上下文（flexbox formatting context）就立刻启动了。用法一个无序列表（）和一群列表元素（），启动flexbox格式化上下文的方式如下：给列表元素（）添加一点基本样式。你将看到的效果如下图所示：默认状况下，是块级元素，在css中垂直排布的，也就是说从上到下罗列显示，就像下图这样

2、：然而，容易的写一行代码，你立刻就可以看到布局转变了。现在列表元素（）水平罗列，从左到右。flexbox模块的开头，正如前面的介绍，在任何父元素上用法。一旦你显式的设置了属性的值为，无序列表就会自动变成flex容器，而其子元素（在本例中是指列表元素）就变成了flex项目。用法了两个关键词，我们把重点放到他们身上。了解他们对于理解后面的学问至关重要。flex容器（flex container）：父元素显式设置了flex项目（flex items）：flex容器内的子元素这些只是flexbox模块的基础。通过上面的内容，我们了解了一些基础学问。知道了flex容器和flex项目是什么，以及如何启动f

3、lexbox模块。有设置一个父元素作为一个flex容器，几个对齐属性可以用法在flex容器上。正如你的块元素的设置了，有六种不同的属性可以用于flex容器。属性控制flex项目沿着主轴（main axis）的罗列方向。它具有四个值：容易点来说，就是属性让你打算flex项目如何罗列。它可以是行（水平）、列（垂直）或者行和列的反向。从技术上讲，水平和垂直在flex世界中不是什么方向（概念）。它们经常被称为主轴（main-axis）和侧轴（cross-axis）。默认设置如下所示。通俗的说，感觉main-axis就是水平方向，从左到右，这也是默认方向。cross-axis是垂直方向，从上往下。默认状

4、况下，属性的值是。它让flex项目沿着main-axis罗列（从左向右，水平罗列）。这就说明了本文开头部分时无序列表的表现效果。尽管属性并没有显式的设置，但它的默认值是。flex项目将沿着main-axis从左向右水平罗列。假如把的属性值修改成，这时flex项目将沿着cross-axis从上到下垂直罗列。不再是从左向右罗列。属性有三个属性值：我将通过一个例子来说明如何用法属性。首先在前面的无序列表的html结构中多添加几个列表项。幸运的是，新添加的flex项目刚好适合flex容器大小。也就是flex项目能刚好填充flex容器。再深化一点。继续给flex容器内添加flex项目，比如说添加到个fl

5、ex项目。这个时候会发生什么？同样的，flex容器还是能容纳全部的子元素（flex项目）罗列，这是每一个flex容器的默认行为。flex容器会在一行内容纳全部的flex项目。这是由于属性的默认值是。也就是说，flex项目在flex容器内不换行罗列。不是不行转变的。我们可以转变。当你希翼flex容器内的flex项目达到一定数量时，能换行罗列。当flex容器中没有足够的空间放置flex项目（flex项目默认宽度），那么flex项目将会换行罗列。把它（）的值设置为就有这种可能：现在flex项目在flex容器中就会多行罗列。在这种状况下，当一行再不能包含全部列表项的默认宽度，他们就会多行罗列。即使调节

6、扫瞄器大小。就是这样子。注重：flex项目现在显示的宽度是他们的默认宽度。也没有须要强迫一行有多少个flex项目。除此之外，还有一个值：。是的，你猜对了。它让flex项目在容器中多行罗列，只是方向是反的。是和两个属性的速记属性。你还记得用法的速记写法？。这里的概念是相同的，多个值写在同一行，比如下面的示例：相当于：除了这个组合之外，你还可以尝试一些其它的组合。，。flexbox模块真得很好。假如你仍然不信任它的魅力，那么属性可能会说服你。属性可以接受下面五个值之一：属性又能给我们带来什么呢？提示你一下，你是否还记得属性。其实属性主要定义了flex项目在main-axis上的对齐方式。来看一个容

7、易的例子，还是考虑下面这个容易的无序列表：添加一些基本样式：你将看到的效果是这样：通过属性，可以让flex项目在囫囵main-axis上根据我自己的欲望设置其对齐方式。可能会有以下几种类型。flex-start的默认属性值是。让全部flex项目靠main-axis开头边缘（左对齐）。flex-end让全部flex项目靠main-axis结束边缘（右对齐）。center和你预期的一样，让全部flex项目排在main-axis中间（居中对齐）。space-between让除了第一个和最一个flex项目的两者间间距相同（两端对齐）。你注重到有什么不同？看看下图的描述：space-around最后，让

8、每个flex项目具有相同的空间。和有点不同，第一个flex项目和最后一个flex项目距main-axis开头边缘和结束边缘的的间距是其他相邻flex项目间距的一半。看看下图的描述：属性类似于属性。惟独理解了属性，才干更好的理解这个属性。属性可以接受这些属性值：。它主要用来控制flex项目在cross-axis对齐方式。这也是和两个属性之间的不同之处。下面是不同的值对flex项目产生的影响。不要遗忘这些属性只对cross-axis轴有影响。首先，让我们设置ul的高度高于li的高度stretch的默认值是。让全部的flex项目高度和flex容器高度一样。flex-start正如你所希翼的让全部fl

9、ex项目靠cross-axis开头边缘（顶部对齐）。flex-end让全部flex项目靠cross-axis结束边缘（底部对齐）。center让flex项目在cross-axis中间（居中对齐）。baseline让全部flex项目在cross-axis上沿着他们自己的基线对齐。结果看上去有点像，但略有不同。那baseline到底是什么呢？下图应当能协助你更好的理解。还记得前面研究的属性吗？我们在flex容器中添加了更多的flex项目。让flex容器中的flex项目多行罗列。属性用于多行的flex容器。它也是用来控制flex项目在flex容器里的罗列方式，罗列效果和值一样，但除了属性值。像属性一

10、样，它的默认值是。你现在应当认识这些值。那它又是如何影响flex容器里的10个flex项目多行罗列方式。stretch用法会拉伸flex项目，让他们沿着cross-axis适应flex容器可用的空间。你看到的flex项目间的间距，是flex项目自身设置的值。flex-start之前你看到过。这次是让多行flex项目靠cross-axis开头边缘。沿着cross-axis从上到下罗列。因此flex项目在flex容器中顶部对齐。flex-end刚好和相反，让多行flex项目凭着cross-axis结束位置。让flex项目沿着cross-axis从下到上罗列，即底部对齐。center你猜到了，让多行

11、flex项目在cross-axis中间。在flex容器中居中对齐。这是flex容器的最后一个属性。你现在知道如何用法各种flex容器属性。你可以在工作中实践这些属性。现在我们把注重力从flex容器转移到flex项目及其对齐属性。像flex容器，对齐属性也可以用在全部的flex项目。和属性控制flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。他们可能接受或者大于的任何正数接下来阐述它们的用法。用法一个容易的无序列表做为例子，它只包含一个列表项。添加更多的样式，看起来像这样：默认状况下，属性值设置为。表示flex项目不会增长，填充flex容器可用空间。取值为就是一个开和关的

12、按钮。表示开关是关闭的。假如把的值设置为，会发生：现在flex项目扩展了，占领了flex容器全部可用空间。也就是说开关打开了。假如你试着调节你扫瞄器的大小，flex项目也会缩小，以适应新的屏幕宽度。为什么？默认状况下，的值是，也就是说开关也是打开的。可以认真看看和属性在各种状况下的效果，这样能更好的协助你理解。属性可以指定flex项目的初始大小。也就是和属性调节它的大小以适应flex容器之前。默认的值是。可以取任何用于属性的任何值。比如？等。注重：假如属性的值是时，也需要用法单位。即不能写成。这里同样用法惟独一个列表项的列表做为示例。默认状况，flex项目的初始宽度由的默认值打算，即：。fle

13、x项目宽度的计算是基于内容的多少来自动计算（很显然，加上了值）。这意味着，假如你增强flex项目中的内容，它可以自动调节大小。然而，假如你想将flex项目设置一个固定的宽度，你也可以这样做：现在flex项目的宽度受到了限制，它的宽度是。是、和三个属性的速记（简写）。在适当的时候，我建议你用法，这样比用法三个属性便利。上面的代码相当于：注重它们之间的挨次。第一，然后是，最后是。缩写成gsb，可以协助你更好的记忆。假如属性值中少一个值，会发生什么呢？假如你只设置了和值，可能是默认值。这就是所谓的肯定flex项目。惟独当你设置了，你会得到一个相对flex项目。你绝对想知道相对和肯定的flex项目是什

14、么？将在后面回答这个问题。让我们看看一些十分实用的值。flex: 0 1 auto这相当于写了默认属性值以及全部的flex项目都是默认行为。很简单理解这一点，首先看看属性。设置为，这意味着flex项目的初始宽度计算是基于内容的大小。把注重力放到下一个属性，设置为。这意味着不会转变flex项目的初始宽度。也就是说，的开关是关闭的。控制flex项目的增长，假如其值设置为，flex项目不会放大以适应屏幕（flex容器大小）。最后，的值是。也就是说，flex项目在须要时会缩小。应用到flex项目效果就是这样子：注重：flex项目没有增长（宽度）。假如有须要，假如调节扫瞄器（调小扫瞄器宽度），flex项

15、目会自动计算宽度。flex: 0 0 auto这个相当于。还是老法规：宽度是被自动计算，不过弹性项目不会舒展或者收缩（由于二者都被设置为零）。舒展和收缩开关都被关掉了。它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小。看看这个 flex 简写是如何影响两个弹性项目的。一个弹性项目会比另一个容纳更多内容。应当注重到的第一件事情是，这两个弹性项目的宽度是不同的。由于宽度是基于内容宽度而自动计算的，所以这是预料得到的。试着缩放一下扫瞄器，你会注重到弹性项目不会收缩其宽度。它们从父元素中突出来了，要看到全部内容，必需横向滚动扫瞄器。在缩放扫瞄器时，弹性项目不会收缩，而是从弹性容器中突出

16、来了。flex: 1 1 auto这与项目相同。还是按我前面立的法规。即，自动计算初始化宽度，但是假如有须要，会舒展或者收缩以适应囫囵可用宽度。舒展和收缩开关打开了，宽度自动被计算。此时，项目会填满可用空间，在缩放扫瞄器时也会随之收缩。剩余宽度被2个item平均分配，一人一半。flex: positive number普通应用于有多个弹性项目的情形。这里正数可以代表任何正数（没有引号）。这与相同。？与写为是一样的，？表示任何正数。与前面我立的法规一样，即，将弹性项目的初始宽度设置为零（嗯？没有宽度？），舒展项目以填满可用空间，并且最后只要有可能就收缩项目。弹性项目没有宽度，那么宽度该如何计算呢？这个时候值就起作用了，它打算弹性项目变宽的程度。由它来负责没有宽度的问题。当有多个弹性项目，并且其初始宽度被设置为基于零的任何值时，比如？，用法这种简写更有用。实际发生的是，弹性项目的宽度被按照值的比例来计算。考虑如下两个列表项标志及 css：记住设置？，会让弹性项目填满可用空间。舒展开关打开了。这里有两个弹性项目。一个的属性值是？，另一个是？，那么会浮现啥状况呢？两个项目上的舒展开关都打