这就是一个无序列表（）里有三个列表元素（）。
你可以把称为父元素，称为子元素。
要开始使用Flexbox，必须先让父元素变成一个Flex容器。
你可以在父元素中显式的设置或者。这样你就可以开始使用Flexbox模块。
实际是显式声明了Flex容器之后，一个Flexbox格式化上下文（Flexbox formatting context）就立即启动了。
使用一个无序列表（）和一群列表元素（），启动Flexbox格式化上下文的方式如下：
给列表元素（）添加一点基本样式。
你将看到的效果如下图所示：
默认情况下，是块级元素，在CSS中垂直排布的，也就是说从上到下排列显示，就像下图这样：
然而，简单的写一行代码，你立即就可以看到布局改变了。
现在列表元素（）水平排列，从左到右。
Flexbox模块的开始，正如前面的介绍，在任何父元素上使用。
一旦你显式的设置了属性的值为，无序列表就会自动变成Flex容器，而其子元素（在本例中是指列表元素）就变成了Flex项目。
使用了两个关键词，我们把重点放到他们身上。了解他们对于理解后面的知识至关重要。
Flex容器（Flex Container）：父元素显式设置了Flex项目（Flex Items）：Flex容器内的子元素
这些只是Flexbox模块的基础。
通过上面的内容，我们了解了一些基础知识。知道了Flex容器和Flex项目是什么，以及如何启动Flexbox模块。
有设置一个父元素作为一个Flex容器，几个对齐属性可以使用在Flex容器上。
正如你的块元素的设置了，有六种不同的属性可以用于Flex容器。
属性控制Flex项目沿着主轴（Main Axis）的排列方向。
它具有四个值：
简单点来说，就是属性让你决定Flex项目如何排列。它可以是行（水平）、列（垂直）或者行和列的反向。
从技术上讲，水平和垂直在Flex世界中不是什么方向（概念）。它们常常被称为主轴（Main-Axis）和侧轴（Cross-Axis）。默认设置如下所示。
通俗的说，感觉Main-Axis就是水平方向，从左到右，这也是默认方向。Cross-Axis是垂直方向，从上往下。
默认情况下，属性的值是。它让Flex项目沿着Main-Axis排列（从左向右，水平排列）。这就解释了本文开始部分时无序列表的表现效果。
尽管属性并没有显式的设置，但它的默认值是。Flex项目将沿着Main-Axis从左向右水平排列。
如果把的属性值修改成，这时Flex项目将沿着Cross-Axis从上到下垂直排列。不再是从左向右排列。
属性有三个属性值：
我将通过一个例子来解释如何使用属性。首先在前面的无序列表的HTML结构中多添加几个列表项。
幸运的是，新添加的Flex项目刚好适合Flex容器大小。也就是Flex项目能刚好填充Flex容器。
再深入一点。
继续给Flex容器内添加Flex项目，比如说添加到个Flex项目。这个时候会发生什么？
同样的，Flex容器还是能容纳所有的子元素（Flex项目）排列，这是每一个Flex容器的默认行为。Flex容器会在一行内容纳所有的Flex项目。这是因为属性的默认值是。也就是说，Flex项目在Flex容器内不换行排列。
不是不可改变的。我们可以改变。
当你希望Flex容器内的Flex项目达到一定数量时，能换行排列。当Flex容器中没有足够的空间放置Flex项目（Flex项目默认宽度），那么Flex项目将会换行排列。把它（）的值设置为就有这种可能：
现在Flex项目在Flex容器中就会多行排列。
在这种情况下，当一行再不能包含所有列表项的默认宽度，他们就会多行排列。即使调整浏览器大小。
就是这样子。注意：Flex项目现在显示的宽度是他们的默认宽度。也没有必要强迫一行有多少个Flex项目。
除此之外，还有一个值：。
是的，你猜对了。它让Flex项目在容器中多行排列，只是方向是反的。
是和两个属性的速记属性。
你还记得使用的速记写法？。这里的概念是相同的，多个值写在同一行，比如下面的示例：
相当于：
除了这个组合之外，你还可以尝试一些其它的组合。，。
Flexbox模块真得很好。如果你仍然不相信它的魅力，那么属性可能会说服你。
属性可以接受下面五个值之一：
属性又能给我们带来什么呢？提醒你一下，你是否还记得属性。其实属性主要定义了Flex项目在Main-Axis上的对齐方式。
来看一个简单的例子，还是考虑下面这个简单的无序列表：
添加一些基本样式：
你将看到的效果是这样：
通过属性，可以让Flex项目在整个Main-Axis上按照我自己的欲望设置其对齐方式。
可能会有以下几种类型。
flex-start
的默认属性值是。
让所有Flex项目靠Main-Axis开始边缘（左对齐）。
flex-end
让所有Flex项目靠Main-Axis结束边缘（右对齐）。
center
和你预期的一样，让所有Flex项目排在Main-Axis中间（居中对齐）。
space-between
让除了第一个和最一个Flex项目的两者间间距相同（两端对齐）。
你注意到有什么不同？看看下图的描述：
space-around
最后，让每个Flex项目具有相同的空间。
和有点不同，第一个Flex项目和最后一个Flex项目距Main-Axis开始边缘和结束边缘的的间距是其他相邻Flex项目间距的一半。看看下图的描述：
属性类似于属性。只有理解了属性，才能更好的理解这个属性。
属性可以接受这些属性值：。
它主要用来控制Flex项目在Cross-Axis对齐方式。这也是和两个属性之间的不同之处。
下面是不同的值对Flex项目产生的影响。不要忘记这些属性只对Cross-Axis轴有影响。
首先，让我们设置ul的高度高于li的高度
stretch
的默认值是。让所有的Flex项目高度和Flex容器高度一样。
flex-start
正如你所希望的让所有Flex项目靠Cross-Axis开始边缘（顶部对齐）。
flex-end
让所有Flex项目靠Cross-Axis结束边缘（底部对齐）。
center
让Flex项目在Cross-Axis中间（居中对齐）。
baseline
让所有Flex项目在Cross-Axis上沿着他们自己的基线对齐。
结果看上去有点像，但略有不同。那“baseline”到底是什么呢？下图应该能帮助你更好的理解。
还记得前面讨论的属性吗？我们在Flex容器中添加了更多的Flex项目。让Flex容器中的Flex项目多行排列。
属性用于多行的Flex容器。它也是用来控制Flex项目在Flex容器里的排列方式，排列效果和值一样，但除了属性值。
像属性一样，它的默认值是。你现在应该熟悉这些值。那它又是如何影响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
你猜到了，让多行Flex项目在Cross-Axis中间。在Flex容器中居中对齐。
这是Flex容器的最后一个属性。你现在知道如何使用各种Flex容器属性。你可以在工作中实践这些属性。
现在我们把注意力从Flex容器转移到Flex项目及其对齐属性。
像Flex容器，对齐属性也可以用在所有的Flex项目。
和属性控制Flex项目在容器有多余的空间如何放大（扩展），在没有额外空间又如何缩小。
他们可能接受或者大于的任何正数……
接下来阐述它们的使用。使用一个简单的无序列表做为例子，它只包含一个列表项。
添加更多的样式，看起来像这样：
默认情况下，属性值设置为。表示Flex项目不会增长，填充Flex容器可用空间。取值为就是一个开和关的按钮。表示开关是关闭的。
如果把的值设置为，会发生：
现在Flex项目扩展了，占据了Flex容器所有可用空间。也就是说开关打开了。如果你试着调整你浏览器的大小，Flex项目也会缩小，以适应新的屏幕宽度。
为什么？默认情况下，的值是，也就是说开关也是打开的。
可以仔细看看和属性在各种情况下的效果，这样能更好的帮助你理解。
属性可以指定Flex项目的初始大小。也就是和属性调整它的大小以适应Flex容器之前。
默认的值是。可以取任何用于属性的任何值。比如？等。
注意：如果属性的值是时，也需要使用单位。即不能写成。
这里同样使用只有一个列表项的列表做为示例。
默认情况，Flex项目的初始宽度由的默认值决定，即：。Flex项目宽度的计算是基于内容的多少来自动计算（很明显，加上了值）。
这意味着，如果你增加Flex项目中的内容，它可以自动调整大小。
然而，如果你想将Flex项目设置一个固定的宽度，你也可以这样做：
现在Flex项目的宽度受到了限制，它的宽度是。
是、和三个属性的速记（简写）。
在适当的时候，我建议你使用，这样比使用三个属性方便。
上面的代码相当于：
注意它们之间的顺序。第一，然后是，最后是。缩写成GSB，可以帮助你更好的记忆。
如果属性值中少一个值，会发生什么呢？
如果你只设置了和值，可能是默认值。这就是所谓的绝对flex项目。只有当你设置了，你会得到一个相对flex项目。
你肯定想知道相对和绝对的Flex项目是什么？将在后面回答这个问题。
让我们看看一些非常有用的值。
flex: 0 1 auto
这相当于写了默认属性值以及所有的Flex项目都是默认行为。
很容易理解这一点，首先看看属性。设置为，这意味着Flex项目的初始宽度计算是基于内容的大小。
把注意力放到下一个属性，设置为。这意味着不会改变Flex项目的初始宽度。也就是说，的开关是关闭的。
控制Flex项目的增长，如果其值设置为，Flex项目不会放大以适应屏幕（Flex容器大小）。
最后，的值是。也就是说，Flex项目在必要时会缩小。
应用到Flex项目效果就是这样子：
注意：Flex项目没有增长（宽度）。如果有必要，如果调整浏览器（调小浏览器宽度），Flex项目会自动计算宽度。
flex: 0 0 auto
这个相当于。
还是老规矩：宽度是被自动计算，不过弹性项目不会伸展或者收缩（因为二者都被设置为零）。伸展和收缩开关都被关掉了。
它基本上是一个固定宽度的元素，其初始宽度是基于弹性项目中内容大小。
看看这个 flex 简写是如何影响两个弹性项目的。一个弹性项目会比另一个容纳更多内容。
应该注意到的第一件事情是，这两个弹性项目的宽度是不同的。因为宽度是基于内容宽度而自动计算的，所以这是预料得到的。
试着缩放一下浏览器，你会注意到弹性项目不会收缩其宽度。它们从父元素中突出来了，要看到所有内容，必须横向滚动浏览器。
在缩放浏览器时，弹性项目不会收缩，而是从弹性容器中突出来了。
flex: 1 1 auto
这与项目相同。
还是按我前面立的规矩。即，自动计算初始化宽度，但是如果有必要，会伸展或者收缩以适应整个可用宽度。
伸展和收缩开关打开了，宽度自动被计算。
此时，项目会填满可用空间，在缩放浏览器时也会随之收缩。剩余宽度被2个item平均分配，一人一半。
flex: “positive number”
一般应用于有多个弹性项目的情形。
这里正数可以代表任何正数（没有引号）。这与相同。
？与写为是一样的，？表示任何正数。
与前面我立的规矩一样，即，将弹性项目的初始宽度设置为零（嗯？没有宽度？），伸展项目以填满可用空间，并且最后只要有可能就收缩项目。
弹性项目没有宽度，那么宽度该如何计算呢？
这个时候值就起作用了，它决定弹性项目变宽的程度。由它来负责没有宽度的问题。
当有多个弹性项目，并且其初始宽度被设置为基于零的任何值时，比如？，使用这种简写更实用。
实际发生的是，弹性项目的宽度被根据值的比例来计算。
考虑如下两个列表项标记及 CSS：
记住设置？，会让弹性项目填满可用空间。伸展开关打开了。
这里有两个弹性项目。一个的属性值是？，另一个是？，那么会出现啥情况呢？
两个项目上的伸展开关都打开了。不过，伸展度是不同的，？和？。
二者都会填满可用空间，不过是按比例的。
它是这样工作的：前一个占的可用空间，后一个占的可用空间。
即使两个弹性项目内容一样大（近似），它们所占空间还是不同。宽度不是基于内容的大小，而是伸展值。一个是另一个的约两倍。
前面了解了一些基本概念，但重要的是要澄清一些重要的概念。那绝对和相对Flex项目之间到底有啥区别呢？二者之间主要的区别在于间距及如何计算间距。
一个相对Flex项目内的间距是根据它的内容大小来计算的。而在绝对Flex项目中，只根据属性来计算，而不是内容。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery