共计 14599 个字符，预计需要花费 37 分钟才能阅读完成。
本教程案例在线演示
有路网 PC 端
有路网挪动端
收费配套视频教程
收费配套视频教程
教程配套源码资源
教程配套源码资源
Flex 容器
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
</ul>这就是一个无序列表 (ul) 里有三个列表元素(li)。
你能够把 ul 称为父元素，li称为子元素。
要开始应用 Flexbox，必须先让父元素变成一个 Flex 容器。
你能够在父元素中显式的设置 display:flex 或者display:inline-flex。这样你就能够开始应用 Flexbox 模块。
理论是显式申明了 Flex 容器之后，一个 Flexbox 格式化上下文（Flexbox formatting context）就立刻启动了。
应用一个无序列表 (ul) 和一群列表元素(li)，启动 Flexbox 格式化上下文的形式如下：
/* 申明父元素为 flex 容器 */
ul {display:flex; /* 或者 inline-flex*/}
给列表元素 (li) 增加一点根本款式。
li {
width: 100px;
height: 100px;
background-color: #8cacea;
margin: 8px;
list-style: none;
}
你将看到的成果如下图所示：
默认状况下，li是块级元素，在 CSS 中垂直排布的，也就是说从上到下排列显示，就像下图这样：
然而，简略的写一行代码display:flex，你立刻就能够看到布局扭转了。
当初列表元素 (li) 程度排列，从左到右。
Flexbox 模块的开始，正如后面的介绍，在任何父元素上应用display:flex。
一旦你显式的设置了 display 属性的值为 flex，无序列表ul 就会主动变成 Flex 容器，而其子元素（在本例中是指列表元素li）就变成了 Flex 我的项目。
应用了两个关键词，咱们把重点放到他们身上。理解他们对于了解前面的常识至关重要。
- Flex 容器（Flex Container）：父元素显式设置了
display:flex - Flex 我的项目（Flex Items）：Flex 容器内的子元素
这些只是 Flexbox 模块的根底。
Flex 容器属性
flex-direction || flex-wrap || flex-flow || justify-content || align-items || align-content
通过下面的内容，咱们理解了一些基础知识。晓得了 Flex 容器和 Flex 我的项目是什么，以及如何启动 Flexbox 模块。
有设置一个父元素作为一个 Flex 容器，几个对齐属性能够应用在 Flex 容器上。
正如你的块元素的 width 设置了200px，有六种不同的属性能够用于 Flex 容器。
flex-direction
flex-direction属性管制 Flex 我的项目沿着主轴（Main Axis）的排列方向。
它具备四个值：
/* ul 是一个 flex 容器 */
ul {flex-direction: row || column || row-reverse || column-reverse;}
简略点来说，就是 flex-direction 属性让你决定 Flex 我的项目如何排列。它能够是行（程度）、列（垂直）或者行和列的反向。
从技术上讲，程度 和垂直 在Flex 世界 中不是什么方向（概念）。它们经常被称为 主轴（Main-Axis）和 侧轴（Cross-Axis）。默认设置如下所示。
艰深的说，感觉 Main-Axis 就是程度方向，从左到右，这也是默认方向。Cross-Axis是垂直方向，从上往下。
默认状况下，flex-direction属性的值是row。它让 Flex 我的项目沿着 Main-Axis 排列（从左向右，程度排列）。这就解释了本文开始局部时无序列表的体现成果。
只管 flex-direction 属性并没有显式的设置，但它的默认值是row。Flex 我的项目将沿着 Main-Axis 从左向右程度排列。
如果把 flex-direction 的属性值批改成column，这时 Flex 我的项目将沿着 Cross-Axis 从上到下垂直排列。不再是从左向右排列。
flex-wrap
flex-wrap属性有三个属性值：
ul {flex-wrap: wrap || nowrap || wrap-reverse;}
我将通过一个例子来解释如何应用 flex-wrap 属性。首先在后面的无序列表的 HTML 构造中多增加几个列表项li。
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
<li></li>
<li></li>
<li></li>
</ul>侥幸的是，新增加的 Flex 我的项目刚好适宜 Flex 容器大小。也就是 Flex 我的项目能刚好填充 Flex 容器。
再深刻一点。
持续给 Flex 容器内增加 Flex 我的项目，比如说增加到 10 个 Flex 我的项目。这个时候会产生什么？
<ul> <!--parent element-->
<li></li> <!--first child element-->
<li></li> <!--second child element-->
<li></li> <!--third child element-->
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
同样的，Flex 容器还是能包容所有的子元素（Flex 我的项目）排列，这是每一个 Flex 容器的默认行为。Flex 容器会在一行内包容所有的 Flex 我的项目。这是因为 flex-wrap 属性的默认值是 nowrap。也就是说，Flex 我的项目在 Flex 容器内 不换行 排列。
ul {flex-wrap: nowrap; /*Flex 容器内的 Flex 我的项目不换行排列 */}
no-wrap不是不可扭转的。咱们能够扭转。
当你心愿 Flex 容器内的 Flex 我的项目达到肯定数量时，能换行排列。当 Flex 容器中没有足够的空间搁置 Flex 我的项目（Flex 我的项目默认宽度），那么 Flex 我的项目将会换行排列。把它（flex-wrap）的值设置为 wrap 就有这种可能：
ul {flex-wrap: wrap;}
当初 Flex 我的项目在 Flex 容器中就会多行排列。
在这种状况下，当一行再不能蕴含所有列表项的默认宽度，他们就会多行排列。即便调整浏览器大小。
就是这样子。留神：Flex 我的项目当初显示的宽度是他们的默认宽度。也没有必要强制一行有多少个 Flex 我的项目。
除此之外，还有一个值：wrap-reverse。
是的，你猜对了。它让 Flex 我的项目在容器中多行排列，只是方向是反的。
flex-flow
flex-flow是 flex-direction 和flex-wrap两个属性的速记属性。
你还记得应用 border 的速记写法？border: 1px solid red。这里的概念是雷同的，多个值写在同一行，比方上面的示例：
ul {flex-flow: row wrap;}
相当于：
ul {
flex-direction: row;
flex-wrap: wrap;
}
除了这个组合之外，你还能够尝试一些其它的组合。flex-flow: row nowrap，flex-flow: column wrap，flex-flow: column nowrap。
justify-content
Flexbox 模块真得很好。如果你依然不置信它的魅力，那么 justify-content 属性可能会压服你。
justify-content属性能够承受上面五个值之一：
ul {justify-content: flex-start || flex-end || center || space-between || space-around}
justify-content属性又能给咱们带来什么呢？揭示你一下，你是否还记得 text-align 属性。其实 justify-content 属性次要定义了 Flex 我的项目在 Main-Axis 上的对齐形式。
来看一个简略的例子，还是思考上面这个简略的无序列表：
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
增加一些根本款式：
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
background-color: #e8e8e9;
}
li {
background-color: #8cacea;
width: 100px;
height: 100px;
margin: 8px;
padding: 4px;
}
你将看到的成果是这样：
通过 justify-content 属性，能够让 Flex 我的项目在整个 Main-Axis 上依照我本人的欲望设置其对齐形式。
可能会有以下几种类型。
flex-start
justify-content的默认属性值是flex-start。
flex-start让所有 Flex 我的项目靠 Main-Axis 开始边缘（左对齐）。
ul {justify-content: flex-start;}
flex-end
flex-end让所有 Flex 我的项目靠 Main-Axis 完结边缘（右对齐）。
ul {justify-content: flex-end;}
center
和你预期的一样，center让所有 Flex 我的项目排在 Main-Axis 两头（居中对齐）。
ul {justify-content: center;}
space-between
space-between让除了第一个和最一个 Flex 我的项目的两者间间距雷同（两端对齐）。
ul {justify-content: space-between;}
你留神到有什么不同？看看下图的形容：
space-around
最初，space-around让每个 Flex 我的项目具备雷同的空间。
ul {justify-content: space-around;}
和 space-between 有点不同，第一个 Flex 我的项目和最初一个 Flex 我的项目距 Main-Axis 开始边缘和完结边缘的的间距是其余相邻 Flex 我的项目间距的一半。看看下图的形容：
align-items
align-items属性相似于 justify-content 属性。只有了解了 justify-content 属性，能力更好的了解这个属性。
align-items属性能够承受这些属性值：flex-start || flex-end || center || stretch || baseline。
ul {align-items: flex-start || flex-end || center || stretch || baseline}
它次要用来管制 Flex 我的项目在 Cross-Axis 对齐形式。这也是 align-items 和justify-content两个属性之间的不同之处。
上面是不同的值对 Flex 我的项目产生的影响。不要遗记这些属性只对 Cross-Axis 轴有影响。
首先，让咱们设置 ul 的高度高于 li 的高度
ul {height: 200px;}stretch
align-items的默认值是stretch。让所有的 Flex 我的项目高度和 Flex 容器高度一样。
flex-start
正如你所心愿的 flex-start 让所有 Flex 我的项目靠 Cross-Axis 开始边缘（顶部对齐）。
flex-end
flex-end让所有 Flex 我的项目靠 Cross-Axis 完结边缘（底部对齐）。
center
center让 Flex 我的项目在 Cross-Axis 两头（居中对齐）。
baseline
让所有 Flex 我的项目在 Cross-Axis 上沿着他们本人的基线对齐。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
border: 1px solid red;
display: flex;
height: 200px;
align-items: baseline;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
list-style: none;
font-size: 28px;
}
li:nth-child(2){font-size: 12px;}
</style>
</head>
<body>
<ul> <!--parent element-->
<li>1</li> <!--first child element-->
<li>2</li> <!--second child element-->
<li>333 33333 33 </li> <!--third child element-->
</ul>
</body>
</html>后果看上去有点像flex-start，但略有不同。那“baseline”到底是什么呢？下图应该能帮忙你更好的了解。
align-content
还记得后面探讨的 wrap 属性吗？咱们在 Flex 容器中增加了更多的 Flex 我的项目。让 Flex 容器中的 Flex 我的项目多行排列。
align-content属性用于多行的 Flex 容器。它也是用来管制 Flex 我的项目在 Flex 容器里的排列形式，排列成果和 align-items 值一样，但除了 baseline 属性值。
像 align-items 属性一样，它的默认值是stretch。你当初应该相熟这些值。那它又是如何影响 Flex 容器里的 10 个 Flex 我的项目多行排列形式。
stretch
应用 stretch 会拉伸 Flex 我的项目，让他们沿着 Cross-Axis 适应 Flex 容器可用的空间。
你看到的 Flex 我的项目间的间距，是 Flex 我的项目本身设置的 margin 值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
border: 1px solid red;
display: flex;
height: 400px;
flex-wrap: wrap;
align-content:center;
}
li {
width: 100px;
background-color: #8cacea;
margin: 8px;
list-style: none;
font-size: 28px;
}
li:nth-child(2){font-size: 12px;}
</style>
</head>
<body>
<ul> <!--parent element-->
<li>1</li> <!--first child element-->
<li>2</li> <!--second child element-->
<li>333 33333</li> <!--third child element-->
<li>1</li> <!--first child element-->
<li>2</li> <!--second child element-->
<li>333 33333 33 </li> <!--third child element-->
<li>1</li> <!--first child element-->
<li>2</li> <!--second child element-->
<li>333 33333 33 </li> <!--third child element-->
</ul>
</body>
</html>
flex-start
之前你看到过flex-start。这次是让多行 Flex 我的项目靠 Cross-Axis 开始边缘。沿着 Cross-Axis 从上到下排列。因而 Flex 我的项目在 Flex 容器中顶部对齐。
flex-end
flex-end刚好和 flex-start 相同，让多行 Flex 我的项目靠着 Cross-Axis 完结地位。让 Flex 我的项目沿着 Cross-Axis 从下到上排列，即底部对齐。
center
你猜到了，center让多行 Flex 我的项目在 Cross-Axis 两头。在 Flex 容器中居中对齐。
这是 Flex 容器的最初一个属性。你当初晓得如何应用各种 Flex 容器属性。你能够在工作中实际这些属性。
Flex 我的项目属性
flex-grow || flex-shrink || flex-basis当初咱们把注意力从 Flex 容器转移到 Flex 我的项目及其对齐属性。
像 Flex 容器，对齐属性也能够用在所有的 Flex 我的项目。
flex-grow 和 flex-shrink
flex-grow和 flex-shrink 属性管制 Flex 我的项目在容器有多余的空间如何放大（扩大），在没有额定空间又如何放大。
他们可能承受 0 或者大于 0 的任何负数。0 || positive number。
接下来论述它们的应用。应用一个简略的无序列表做为例子，它只蕴含一个列表项。
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
}
li {
background-color: #8cacea;
height: 100px;
margin: 8px;
padding: 10px;
}
<ul>
<li>I am a simple list</li>
</ul>增加更多的款式，看起来像这样：
默认状况下，flex-grow属性值设置为 0。示意 Flex 我的项目不会增长，填充 Flex 容器可用空间。取值为0 就是一个开和关的按钮。示意 flex-grow 开关是敞开的。
如果把 flex-grow 的值设置为1，会产生：
当初 Flex 我的项目扩大了，占据了 Flex 容器所有可用空间。也就是说开关关上了。如果你试着调整你浏览器的大小，Flex 我的项目也会放大，以适应新的屏幕宽度。
为什么？默认状况下，flex-shrink的值是 1，也就是说flex-shrink 开关也是关上的。
能够认真看看 flex-grow 和flex-shrink属性在各种状况下的成果，这样能更好的帮忙你了解。
flex-basis
flex-basis属性能够指定 Flex 我的项目的初始大小。也就是 flex-grow 和flex-shrink属性调整它的大小以适应 Flex 容器之前。
flex-basis默认的值是 auto。flex-basis 能够取任何用于 width 属性的任何值。比方 % || em || rem || px等。
留神 ：如果flex-basis 属性的值是 0 时，也须要应用单位。即 flex-basis: 0px 不能写成flex-basis:0。
这里同样应用只有一个列表项的列表做为示例。
/* 申明父元素为 flex 容器 */
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
}
li {
background-color: #8cacea;
height: 100px;
margin: 8px;
padding: 10px;
}
<ul>
<li>I am a simple list</li>
</ul>
默认状况，Flex 我的项目的初始宽度由 flex-basis 的默认值决定，即：flex-basis: auto。Flex 我的项目宽度的计算是基于内容的多少来主动计算（很显著，加上了 padding 值）。
这意味着，如果你减少 Flex 我的项目中的内容，它能够主动调整大小。
<ul>
<li>I am a simple list AND I am a simple list</li>
</ul>
然而，如果你想将 Flex 我的项目设置一个固定的宽度，你也能够这样做：
li {flex-basis: 150px;}
当初 Flex 我的项目的宽度受到了限度，它的宽度是150px。
flex 速记
flex是 flex-grow、flex-shrink 和flex-basis三个属性的速记（简写）。
在适当的时候，我倡议你应用flex，这样比应用三个属性不便。
li {flex: 0 1 auto;}
下面的代码相当于：
li {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
留神它们之间的程序。flex-grow第一，而后是flex-shrink，最初是flex-basis。缩写成GSB，能够帮忙你更好的记忆。
如果 flex 属性值中少一个值，会产生什么呢？
如果你只设置了 flex-grow 和flex-shrink值，flex-basis可能是默认值0。这就是所谓的相对 flex 我的项目。只有当你设置了flex-basis，你会失去一个绝对 flex 我的项目。
/* 这是一个相对的 Flex 我的项目 */
li {flex: 1 1; /*flex-basis 默认值为 0*/}
/* 这是一个绝对的 Flex 我的项目 */
li {flex-basis: 200px; /* 只设置了 flex-basis 的值 */}
你必定想晓得绝对和相对的 Flex 我的项目是什么？将在前面答复这个问题。
让咱们看看一些十分有用的 flex 值。
flex: 0 1 auto
li {flex: 0 1 auto;}
这相当于写了 flex 默认属性值以及所有的 Flex 我的项目都是默认行为。
很容易了解这一点，首先看看 flex-basis 属性。flex-basis设置为auto，这意味着 Flex 我的项目的初始宽度计算是基于内容的大小。
把注意力放到下一个属性，flex-grow设置为 0。这意味着flex-grow 不会扭转 Flex 我的项目的初始宽度。也就是说，flex-grow的开关是敞开的。
flex-grow管制 Flex 我的项目的增长，如果其值设置为0，Flex 我的项目不会放大以适应屏幕（Flex 容器大小）。
最初，flex-shrink的值是1。也就是说，Flex 我的项目在必要时会放大。
利用到 Flex 我的项目成果就是这样子：
留神：Flex 我的项目没有增长（宽度）。如果有必要，如果调整浏览器(调小浏览器宽度)，Flex 我的项目会主动计算宽度。
flex: 0 0 auto
li {flex: 0 0 auto;}
这个相当于flex: none。
还是老规矩：宽度是被主动计算，不过弹性我的项目不会舒展或者膨胀（因为二者都被设置为零）。舒展和膨胀开关都被关掉了。
它基本上是一个固定宽度的元素，其初始宽度是基于弹性我的项目中内容大小。
看看这个 flex 简写是如何影响两个弹性我的项目的。一个弹性我的项目会比另一个包容更多内容。
应该留神到的第一件事件是，这两个弹性我的项目的宽度是不同的。因为宽度是基于内容宽度而主动计算的，所以这是意料失去的。
试着缩放一下浏览器，你会留神到弹性我的项目不会膨胀其宽度。它们从父元素中突出来了，要看到所有内容，必须横向滚动浏览器。
在缩放浏览器时，弹性我的项目不会膨胀，而是从弹性容器中突出来了。
flex: 1 1 auto
这与 flex: auto 我的项目雷同。
还是按我后面立的规矩。即，主动计算初始化宽度，然而如果有必要，会舒展或者膨胀以适应整个可用宽度。
舒展和膨胀开关关上了，宽度主动被计算。
此时，我的项目会填满可用空间，在缩放浏览器时也会随之膨胀。残余宽度被 2 个 item 平均分配，一人一半。
flex: “positive number”
个别利用于有多个弹性我的项目的情景。
这里负数能够代表任何负数（没有引号）。这与 flex:“负数”1 0 雷同。
flex: 2 1 0 与写为 flex: 2 是一样的，2 示意任何负数。
li {flex: 2 1 0; / * 与 flex: 2 雷同 */}
与后面我立的规矩一样，即，将弹性我的项目的初始宽度设置为零（嗯？没有宽度？），舒展我的项目以填满可用空间，并且最初只有有可能就膨胀我的项目。
弹性我的项目没有宽度，那么宽度该如何计算呢？
这个时候 flex-grow 值就起作用了，它决定弹性我的项目变宽的水平。由它来负责没有宽度的问题。
当有多个弹性我的项目，并且其初始宽度 flex-basis 被设置为基于零的任何值时，比方 0px，应用这种 flex 简写更实用。
理论产生的是，弹性我的项目的宽度被依据 flex-grow 值的比例来计算。
思考如下两个列表项标记及 CSS：
<ul>
<li>I am One</li>
<li>I am Two</li>
</ul>
<style>
/* 申明父元素为 flex 容器 */
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
}
li {
background-color: #8cacea;
height: 100px;
margin: 8px;
padding: 10px;
/* flex-basis: 150px; */
}
/* 第一个弹性我的项目 */
li:nth-child(1) {flex: 2 1 0; /* 与写成 flex: 2 雷同 */}
/* 第二个弹性我的项目 */
li:nth-child(2){
flex: 1 1 0;
background-color: #8cacea;
}
</style>
记住设置 flex-grow : 1，会让弹性我的项目填满可用空间。舒展开关关上了。
这里有两个弹性我的项目。一个的 flex-grow 属性值是 1，另一个是 2，那么会呈现啥状况呢？
两个我的项目上的舒展开关都关上了。不过，舒展度是不同的，1 和 2。
二者都会填满可用空间，不过是按比例的。
它是这样工作的：前一个占 1/3 的可用空间，后一个占 2/3 的可用空间。
即便两个弹性我的项目内容一样大（近似），它们所占空间还是不同。宽度不是基于内容的大小，而是舒展值。一个是另一个的约两倍。
相对和绝对 Flex 我的项目
后面理解了一些基本概念，但重要的是要廓清一些重要的概念。那相对和绝对 Flex 我的项目之间到底有啥区别呢？二者之间次要的区别在于间距及如何计算间距。
一个绝对 Flex 我的项目内的间距是依据它的内容大小来计算的。而在相对 Flex 我的项目中，只依据 flex 属性来计算，而不是内容。
思考如下的标记：
<ul>
<li>
This is just some random text to buttress the point being explained.
Some more random text to buttress the point being explained.
</li>
<li>This is just a shorter random text.</li>
</ul>
两个列表项元素，一个比另一个的文本多得多。
加点款式：
ul {display: flex; /* 触发弹性盒 */}
li {
flex: auto; /* 记住这与 flex: 1 1 auto; 雷同 */
border: 2px solid red;
margin: 2em;
}
如下是后果：
如果你曾经忘了的话，flex: 1 1 auto 是与 flex-grow: 1、flex-shrink: 1 和 flex-basis: auto 雷同的。
Flex 我的项目的初始宽度是被主动计算的（flex-basis: auto），而后会舒展以适应可用空间（flex-grow: 1）。
当 Flex 我的项目因为被设置为 flex-basis: auto，而导致宽度被主动计算时，是基于 Flex 我的项目内蕴含的内容的大小而计算。
下面示例中 Flex 我的项目的内容大小不雷同。因而，Flex 我的项目的大小就会不相等。
既然各个宽度开始就不是相等的（它是基于内容的），那么当我的项目舒展时，宽度也放弃不相等。
能够试试让两个 li 的内容雷同再试试。
下面示例中的 Flex 我的项目是绝对 Flex 我的项目。
上面咱们把 Flex 我的项目变成相对的, 就是说这次它们的宽度是基于 flex 属性，而不是内容的大小。一行代码就能够出奇观。
li {flex: 1 ; /* 与 flex: 1 1 0 雷同 */}
成果如下：
这次看到两个 Flex 我的项目的宽度雷同了吗？
Flex 我的项目的初始宽度是零（flex-basis: 0），并且它们会舒展以适应可用空间。当有两到多个 Flex 我的项目的 flex-basis 取值为 0 时，它们会基于 flex-grow值共享可用空间。
当初宽度不会基于内容大小而计算，而是基于指定的 flex 属性值来计算。
相对 Flex 我的项目的宽度只基于 flex 属性，而绝对 Flex 我的项目的宽度基于初始内容大小。
Auto-margin 对齐
当心 Flex 我的项目上的 margin: auto 对齐。当在 Flex 我的项目上应用 margin: auto 时，事件看起来就很怪异了。
你须要了解会产生什么。它会导致不可意料的后果，不过我打算解释解释。
当在 Flex 我的项目上应用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有残余空间。
这玩意有点难了解。上面我来阐明一下。
思考如下的导航栏标记以及 CSS 款式：
<ul>
<li>Branding</li>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<style>
/* 申明父元素为 flex 容器 */
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
}
li {
background-color: #8cacea;
margin: 8px;
padding: 10px;
flex: 0 0 auto;
border: 2px solid red;
}
</style>
你能够看到如下的成果：
这里有几件事件要留神：
flex-grow值为设置为0。这就解释了为什么列表项不会舒展。- Flex 我的项目向 Main-Axis 的结尾对齐（这是默认行为）。
- 因为我的项目被对齐到 Main-Axis 结尾，左边就有一些多余的空间。看到了吧？
当初在第一个列表项（branding）上应用 margin: auto，看看会出啥状况。
li:nth-child(1) {margin-right: auto; /* 只利用到右外边距 */}
刚刚产生了什么？之前的残余空间当初曾经被调配到第一个 Flex 我的项目的左边了。
还记得我后面说的话吧？当在 Flex 我的项目上应用 margin: auto 时，值为 auto 的方向（左、右或者二者都是）会占据所有残余空间。
如果想让一个 Flex 我的项目的两边都用主动外边距对齐，该怎么办呢？
/* 如果违心的话，也能够用 margin 简写来设置两个边 */
li:nth-child(1) {
margin-left: auto;
margin-right: auto
}
当初空白被调配到 Flex 我的项目的两边了。
那么，这是不是对很酷的主动外边距对齐的一种折衷方案呢？看起来是。如果没留神的话，它也可能是受挫之源。当在一个 Flex 我的项目上应用主动外边距（margin: auto）时，justify-content 属性就不起作用了。
例如，在下面的 Flex 容器上通过 justify-content 属性，设置不同的对齐选项时，对布局没有影响。
ul {justify-content: flex-end;}
Flexbox 实战
导航系统是每个网站或者应用程序的重要组成部分。这个世界上的每个网站都会有某种导航系统。
上面咱们看看这些热门网站，以及它们是如何实现其导航系统的。你看到 Flexbox 是如何帮忙你更高效地创立这些布局吗？
也认真看看哪里会用得上主动外边距个性。
Bootstrap 导航
AirBnB PC 端导航
Twitter PC 端导航
倡议你本人写代码。试着本人实现这些导航系统。
切换 flex-direction 会产生什么？
还记得我说过默认的 Main-Axis 方向是从左到右，Cross-Axis 方向是从上到下吧？
好吧，当初你也能够扭转这个方向。
正如在较早的大节中所形容的那样，用 flex-direction: column 时，的确是这样。
当用 flex-direction: column 时，Main-Axis 和 Cross-Axis 会向如下所看到的那样扭转：
如果曾用英语写过文字，那么你就晓得英语是从左到右，从上到下来写的。
Flexbox 的默认 Main-Axis 和 Cross-Axis 也是采纳同样的方向。
不过，如果将 flex-direction 切换为 column，它就不再遵循英语的范式，而是日语的范式！
是的，日语。
如果你用日语写过文字，那么应该很相熟了。（郑重声明，我从没用过日语写过文字）。
日文通常是从上到下写的！没那么怪，对吧？
这就解释了为嘛这对英语写作者可能有点恼火。
看看上面这个例子。规范无序列表(ul)，带有 3 个列表项(li)。不过这次我要扭转一下flex-direction。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<style>
/* 申明父元素为 flex 容器 */
ul {
display:flex;
border: 1px solid red;
padding: 0;
list-style: none;
flex-direction: column;
}
li {
background-color: #8cacea;
margin: 8px;
padding: 10px;
flex: 0 0 auto;
border: 2px solid red;
}
</style>
如下是方向变动之前的样子：
如下是方向变动之后的样子：
当初文字是以日语格调写的：沿 Main-Axis 从上到下。
你会看到我的项目的宽度填满了空间，对吧？
如果在之前要变成这样子，得解决 flex-basis 以及 flex-grow 属性。
上面来看看这些会如何影响新的布局。
li {flex-basis: 100px;}
上面是你会失去的。
什么？高度是被影响了，然而宽度没有啊？我之前说过，flex-basis 属性定义每个 Flex 我的项目的初始宽度。
在切换 flex-direction 时，请留神，影响 Main-Axis 的每一个属性当初会影响新 Main-Axis。像 flex-basis 这种会影响 Main-Axis 上 Flex 我的项目宽度的属性，当初会影响我的项目的高度，而不是宽度。
方向曾经被切换了！
所以，即便你应用 flex-grow 属性，它也是影响高度。实质上，每个作用于横向轴（即 Main-Axis）上的 flex 属性，当初都会作用于纵向上的新 Main-Axis。它只是在方向上的一个切换。
这里再来一个例子。我赌咒在这个例子之后你会有更好的了解。缩小之前看到过的 Flex 我的项目的宽度，它们就不再填满整个空间了：
li {width: 200px;}
如果想把列表项移到屏幕两头该怎么办呢？
在英语中，这是你到目前为止解决弹性容器的形式。就是说，把 Flex 我的项目移到 Main-Axis 的两头。
所以，你会用 justify-content: center。然而这样做不起作用。因为方向变了，核心是沿着 Cross-Axis，而不是 Main-Axis。
再来看看：
所以请用日语文字来思考。Main-Axis 是从上到下，你不须要这样。Cross-Axis 是从左到右。貌似是你所要的。
你须要 把 Flex 我的项目移到 Cross-Axis 的两头。这里想起哪个 Flex 容器属性了么？
是的，align-items 属性。align-items 属性解决 Cross-Axis 上的对齐。
所以要把这些我的项目移到两头，得这样做：
li {align-items: center;}
瞧瞧！Flex 我的项目曾经居中了吧。
参考：
https://medium.freecodecamp.c…
