Flexbox也被称为CSS灵活盒布局模块，它使网页设计师能够完全控制如何沿轴线排列页面项目。Flexbox被用来创建响应式菜单栏、图片库、产品列表和其他各种页面组件。Flexbox的关键点是能够使项目弯曲，从而改变它们的宽度和高度，以填补特定尺寸的空间。这使得页面项目能够在其容器内伸展和收缩，从而减少浪费的空间和溢出，使响应式布局更容易制作。
我们的第一个 Flexbox 布局
为了开始使用我们的第一个 Flexbox 布局，我们只需要设置一个非常基本的容器，里面有一些项目。我们将使用以下html和css，如果你想跟着做的话。
html
<body>
<nav class="container">
<div>Home</div>
<div>About</div>
<div>Services</div>
</nav>
</body>
css
body {
margin: 10px;
font-family: Verdana;
}
.container {
border: 5px solid #eee;
}
.container>div {
padding: 10px;
text-align: center;
font-size: 2em;
}
.container>div:nth-child(1) {
background-color: #84b0f8;
}
.container>div:nth-child(2) {
background-color: #f2857c;
}
.container>div:nth-child(3) {
background-color: #fcd35d;
}
这给我们带来了我们所期望的结果。三个块级元素，相互堆叠在一起，占据了浏览器的全部宽度。
容器和项目
在Flexbox中，我们有一个容器和它的项目。这些是任何 Flexbox 组件的两个组成部分。任何作为 Flexbox 容器的直接子元素的 html 元素都会成为 Flexbox 项目。有了这些知识，我们现在就可以将我们的基于块的显示方式转变为flexbox的显示方式。我们所要做的就是在容器中添加一个显示为 **flex**到容器中，就像这样。
.container {
display: flex;
}
通过给父容器指定display: flex;，我们的项目现在水平排列，而不是原来的堆叠行为。这告诉我们，默认情况下，Flexbox在容器中从左到右显示项目。
Flexbox轴（主轴和交叉轴）
在flexbox中，我们有一个从左到右的主轴，和一个从上到下的横轴。这决定了Flexbox容器的方向。Flexbox容器总是有一个方向。默认情况下，方向是水平的，项目从左到右显示。这也被称为 "行"。这很重要，因为不同的css属性被用来控制flexbox项目，基于它们是在主轴还是横轴上。flexbox容器的轴是由 flex-direction属性控制。
我们可以用这个css将我们的第一个flexbox布局从行转换成列。
.container {
display: flex;
flex-direction: column;
}
现在，flexbox容器从上到下而不是从左到右堆叠项目。这里是棘手的部分。从上到下的轴现在是主轴，而从左到右是横轴。
这里有一张图来直观地解释这个概念。
flex-direction: row;的值对于大量的用例来说已经足够了，在刚开始使用flexbox的时候，有必要使用 row来学习。
用Flexbox证明内容的合理性
继续，把Flex-direction放回行，这样我们就有了从左到右的布局。现在，我们将开始研究如何沿主轴定位Flex项目。由于我们现在回到了flex-direction: row;--这意味着主轴是从左到右的水平方向。
justify-content: flex-start;
这是默认的，所以即使你没有明确指定，布局也会以这种方式发生。
.container {
display: flex;
justify-content: flex-start;
}
justify-content: flex-end;
这个值是将柔性项目移到柔性容器的末端。
.container {
display: flex;
justify-content: flex-end;
}
justify-content: center;
为justify-content属性指定center，可将柔性项目对齐到柔性容器的中心。
.container {
display: flex;
justify-content: center;
}
justify-content: space-between;
space-between值在柔性项目之间放置一个均匀的空间，但不在末端增加空间。
.container {
display: flex;
justify-content: space-between;
}
justify-content: space-around;
工作原理与上面一样，只是在两端增加了空间。
.container {
display: flex;
justify-content: space-around;
}
在Flexbox中定位项目
当我们刚才讨论的标准justify-content选项可能无法满足要求时，你肯定会需要在flexbox容器中定位单个flex项目。如果你想在一侧放置两个灵活的项目，另一侧放置另一个灵活的项目，该怎么办？在这种情况下，我们可以使用 **margin**属性在这种情况下。我们现在需要开始针对单个项目，所以我们更新每个项目都有一个独特的类。
<body>
<nav class="container">
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</body>
想象一下，我们想把服务项目移到右边，但让主页和关于项目保持原样。我们怎样才能做到这一点呢？现在让我们看看这个更新的css。
.container {
display: flex;
}
.services {
margin-left: auto;
}
这使我们能够轻松地沿主轴定位单个项目。看起来不错
要把 "关于 "和 "服务 "这两个项目都移过去，我们可以简单地把 "关于 "这一项作为目标，这样做。
.container {
display: flex;
}
.about {
margin-left: auto;
}
该 **flex**属性
你会爱上flexbox中这个很酷的小属性。flex属性使flex项目在flexbox容器内成为响应式的，它可以实现一些非常巧妙的效果。想象一下，我们想让每个弹性项目从左到右一直延伸，这样每个项目就会占用同等的宽度。我们可以应用这个css。
.container {
display: flex;
}
.container > div {
flex: 1;
}
现在让我们只让一个弹性项目的宽度是其他项目的2倍。我们可以只针对服务项目，并将它的弹性设置为2。
.container {
display: flex;
}
.container > div {
flex: 1;
}
.container > .services {
flex: 2;
}
很多时候，你可以简单地设置一个项目来做所有的弯曲，而其他项目保持固定的宽度。在下面的例子中，"关于 "项在所有屏幕尺寸下都会弯曲，而 "主页 "和 "服务 "则保持固定宽度。
.container {
display: flex;
}
.about {
flex: 2;
}
现在，我们也可以让两个灵活的项目增长和收缩，而另一个保持固定的宽度。这个例子中，"关于 "部分将保持固定宽度，而 "主页 "和 "服务 "部分则动态地增长和缩小。
.container {
display: flex;
}
.home, .services {
flex: 1;
}
用Flexbox对齐项目
现在让我们来看看如何沿十字轴定位柔性项目。记住，轴线是根据柔性容器的方向确定的。为了简单起见，我们坚持使用行的柔性方向。这意味着十字轴是从上到下的轴。默认情况下，flex项目将在十字轴上伸展自己。为了证明这一点，我们可以使我们的柔性容器的高度为200像素，而每个项目仍然会从上到下填满空间。看看吧。
.container {
display: flex;
height: 200px;
}
当一个flexbox容器的高度大于其中包含的flex项目时，我们可以使用align-items属性在十字轴上定位。下面是几个例子。
align-items: flex-start;
通过给align-items属性指定flex-start，柔性项目就会与柔性容器的顶部对齐。
.container {
display: flex;
height: 200px;
align-items: flex-start;
}
align-items: center;
center的值会将柔性项目置于柔性容器的中间。
.container {
display: flex;
height: 200px;
align-items: center;
}
align-items: flex-end;
flex-end值将柔性项目放在柔性容器的底部。
.container {
display: flex;
height: 200px;
align-items: flex-end;
}
align-items: baseline;
baseline值根据每个柔性项目的内容来排列柔性容器中的项目。为了证明这一点，我们需要实际改变每个项目的包含内容。我们可以简单地给每个flex项目分配不同的字体大小。请注意，即使每个柔性项目的内容大小不同，每个项目的文本底部都能完美地排成一行。
.container {
display: flex;
height: 200px;
align-items: baseline;
}
使用Flexbox的完美居中
可能给全世界的网页设计师带来更多快乐的是，使用flexbox可以将一个项目在水平和垂直方向上完美居中。你所要做的就是将align-items: center;和justify-content: center;同时应用于flexbox容器。
.container {
display: flex;
height: 200px;
align-items: center;
justify-content: center;
}
对齐单个Flex项目
就像前面的Justify一样，我们可能希望对项目在横轴上的对齐方式进行更精细的控制。为此，我们可以在单个Flex项目上使用align-self。在第一个例子中，我们可以针对我们的 "关于 "部分，将其移至顶部。
.container {
display: flex;
height: 200px;
align-items: center;
}
.about {
align-self: flex-start;
}
现在，也许我们想针对一个不同的柔性项目并将其移到底部。没问题。
.container {
display: flex;
height: 200px;
align-items: center;
}
.about {
align-self: flex-start;
}
.services {
align-self: flex-end;
}
改变轴的方向 column
好了，我们在Flexbox方面取得了很大的进展，我们玩得开心吗？所以，现在我们要在这个环节中扔一个猴子扳手，完全改变Flexbox容器的工作方式。在flexbox中，记住默认的flex-direction是行。这意味着项目从左到右流动。它也可以是列，这将改变项目的方向，使其从上到下。为了让你更加困惑，你还可以用行逆向和列逆向来扭转这两个方向。此外，主轴和横轴在每个场景下都是不同的
justify-content: flex-start;
.container {
display: flex;
height: 300px;
flex-direction: column;
justify-content: flex-start;
}
justify-content: flex-end;
.container {
display: flex;
height: 300px;
flex-direction: column;
justify-content: flex-end;
}
justify-content: center;
.container {
display: flex;
height: 300px;
flex-direction: column;
justify-content: center;
}
justify-content: space-between;
.container {
display: flex;
height: 300px;
flex-direction: column;
justify-content: space-between;
}
justify-content: space-around;
.container {
display: flex;
height: 300px;
flex-direction: column;
justify-content: space-around;
}
justify-content: space-evenly;
.container {
display: flex;
height: 300px;
flex-direction: column;
justify-content: space-evenly;
}
Flexbox轴总结
主轴和横轴根据flex-direction的值改变。
flex-direction：行。
主轴从左到右移动，横轴从上到下移动。
flex-direction: column;
主轴从上到下移动，十字轴从左到右移动。
Flex-direction: row-reverse
主轴从右向左移动，十字轴从上到下移动。
flex-direction: column-reverse;
主轴从下往上走，横轴从左往右走。
Flexbox中的包覆
在浮动布局中，项目一直都是包起来的。在Flexbox中，默认设置是Flex项目不包覆。只有在设计者明确说明的情况下，Flex项目才会被包起来。要打开包覆，我们可以将flex-wrap设置为包覆。我们可以将每个flex项目设置为一个宽值，例如343像素。我们也可以像这样打开包覆功能。
.container {
display: flex;
flex-wrap: wrap;
}
.container > div {
width: 343px;
}
如果我们注释掉*flex-wrap: wrap;*声明，那么即使灵活项目被分配了一个明显应超出灵活容器的宽度，它们也不会被包裹。在这种情况下发生的事情是，flexbox会自动缩小每个列表项以适应给定的空间。
.container {
display: flex;
/* flex-wrap: wrap; */
}
.container > div {
width: 343px;
}
弹性增长、收缩和基础
我们之前看到了如何使用 **flex**属性使我们能够根据需要使每个弹性项目自动增长和缩小。换句话说，这一个属性让一切都变得有反应。该 **flex**属性实际上是使用其他三个属性的一个速记符号。它们是 flex-grow, flex-shrink，以及 flex-basis.以下三个css块是等价的。
.about {
flex: 1;
}
.about {
flex: 1 1 0;
}
.about {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}
让我们来看看每个属性。flex-base属性是一种设置flex项目的初始主尺寸的方式。
flex-grow属性设置了一个flex项目的动态增长量。它决定了柔性容器中的可用空间应分配给该柔性项的多少。如果所有同级别的灵活项目都有相同的灵活增长系数，那么所有项目都会被赋予相同的可用空间。flex-grow决定了应将多少额外空间分配给各个灵活项目。
flex-shrink属性设置了一个flex项目的动态收缩系数。当柔性项的默认尺寸大于柔性容器时，柔性项将根据所提供的值收缩以填充容器。
例如，考虑我们的flexbox容器现在只有两个flex项目。
<body>
<nav class="container">
<div class="about">About</div>
<div class="services">Services</div>
</nav>
</body>
.container {
display: flex;
}
.about {
flex-basis: 200px;
}
.services {
flex-basis: 200px;
}
由于只为每个flex item设置了flex-base，每个项目不会随着容器的扩展而增长。它们将只占用200像素的最大宽度。然而，如果容器倒塌，这将缩小。
通过添加flex-grow属性，其结果开始有点像只设置flex。每个项目将随着容器的扩张而平等地增长。
.container {
display: flex;
}
.about {
flex-grow: 1;
flex-basis: 200px;
}
.services {
flex-grow: 1;
flex-basis: 200px;
}
下面的规则说明了这一点。关于和服务部分都将以200像素开始。然后，额外的空间将被分配给服务，而没有额外的空间将被分配给关于。
.container {
display: flex;
}
.about {
flex-grow: 0;
flex-basis: 200px;
}
.services {
flex-grow: 1;
flex-basis: 200px;
}
这些属性的最后一个例子将是flex-shrink。这意味着，如果容器收缩的尺寸小于至少允许每个弹性项目的初始宽度，那么关于部分将开始收缩，而服务部分则不会。
.container {
display: flex;
}
.about {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 300px;
}
.services {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 300px;
}
如何使用 Flexbox 订购
Flexbox有一个类似于CSS Grid的功能，即你可以在视觉上重新排列项目，同时保留底层的HTML标记。我们可以稍微改变一下HTML，使这个排序概念更容易掌握。我们现在要做的是，在不触及HTML标记的情况下，重新安排这些柔性项目在浏览器中的显示方式。我们将只使用 **order**属性。
html
<body>
<nav class="container">
<div class="flex1">Flex 1</div>
<div class="flex2">Flex 2</div>
<div class="flex3">Flex 3</div>
</nav>
</body>
css
.container {
display: flex;
}
.container > div {
flex: 1;
}
.container > .flex2 {
order: 1;
}
将第2项的顺序设置为1，使其在容器中处于最后。
出现上述行为的原因是，顺序值不是元素列表中的位置。顺序值的工作原理是假设所有的柔性项目都以0的顺序开始。一个柔性项目越高于0，它就会被推到最后面。数字越低于0（可以是负数），该项目就会被推到开头。考虑到这一点，让我们试着让项目2先推，项目3后推，项目1最后推。
.container {
display: flex;
}
.container > div {
flex: 1;
}
.container > .flex1 {
order: 30;
}
.container > .flex2 {
order: 10;
}
.container > .flex3 {
order: 20;
}
看下面，我们得到了我们想要的结果。我们用10、20和30作为数值来证明数字值不是项目所占的位置。可以这么说，它是一个重量。发生的情况是，浏览器查看所有项目的数值，并将它们从低到高排列。Flex项目2的最低值是10，所以它排在第一位。下一个最低值是Flex项目3，价值为20，所以它排在后面。Flex项目1的数值为30，所以它排在最后。
使用Flexbox的媒体查询
一个很好的技巧是在使用Flexbox布局时使用CSS媒体查询。这样做的原因是，当视口小于给定尺寸时，你可以打开Flex-wrap并指定Flex-base。首先，让我们更新我们的HTML，添加另一个flex项目。
<body>
<nav class="container">
<div class="home">Home</div>
<div class="about">About</div>
<div class="services">Services</div>
<div class="contact">Contact</div>
</nav>
</body>
我们可以从这个css开始，用于普通桌面视图。
.container {
display: flex;
}
.container > div {
flex: 1;
}
现在我们要创建一个平板电脑视图。对于平板电脑大小的屏幕，一个漂亮的两两叠加的设计将是不错的。为此，我们可以使用这个方便的媒体查询。下面的css说的是，如果浏览器达到700像素或更低，打开flex wrap，并使每个flex项目有50%的flex基础。(46%是为了考虑到padding, margin等)。
.container {
display: flex;
}
.container > div {
flex: 1;
}
@media all and (max-width: 700px) {
.container {
flex-wrap: wrap;
}
.container > div {
flex: 1 1 46%;
}
}
这样我们就可以在平板电脑上得到这个漂亮的布局。
最后，我们可以像这样为移动视图添加媒体查询。
.container {
display: flex;
}
.container > div {
flex: 1;
}
@media all and (max-width: 700px) {
.container {
flex-wrap: wrap;
}
.container > div {
flex: 1 1 46%;
}
}
@media all and (max-width: 550px) {
.container > div {
flex: 1 1 100%;
}
}
这在移动设备上提供了一个漂亮的堆叠式菜单，便于导航。
用Flexbox创建一个图片网格
Flexbox使创建图片库也变得非常容易！我们有一些基本的HTML标记。这里我们有一些基本的HTML标记，用于我们的图片库。
<body>
<nav class="container">
<div class="home"><img src="art.jpeg"></div>
<div class="home"><img src="boats.jpeg"></div>
<div class="home"><img src="cat.jpeg"></div>
<div class="home"><img src="city.jpeg"></div>
<div class="home"><img src="cleaning.jpeg"></div>
<div class="home"><img src="field.jpeg"></div>
<div class="home"><img src="flowers.jpeg"></div>
<div class="home"><img src="globe.jpeg"></div>
<div class="home"><img src="hand.jpeg"></div>
<div class="home"><img src="lake.jpeg"></div>
<div class="home"><img src="plant.jpeg"></div>
<div class="home"><img src="sailboat.jpeg"></div>
<div class="home"><img src="sofa.jpeg"></div>
<div class="home"><img src="street.jpeg"></div>
<div class="home"><img src="tomato.jpeg"></div>
</nav>
</body>
我们唯一需要的CSS是这个!
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.container > div > img {
width: 230px;
}
.container > div {
flex: 1;
}
仅仅通过几个CSS片段，我们就可以得到一个非常漂亮的图片库。
下面是使用Flexbox时需要了解的Flexbox属性。
Flexbox容器属性
- display: flex- 将该元素变成一个柔性容器。
- flex-direction- 设定Flex项目在Flex容器中的放置方向。
- flex-wrap- 允许你打开对柔性项目的包裹，默认情况下是关闭的。
- flex-flow- 是flex-direction和flex-wrap的速记符号。
- justify-content- 决定如何在主轴上的项目之间分配空间
- align-content- 排列横轴上的柔性项目
- align-items- 决定如何在横轴上的项目之间分配空间。
Flexbox项目属性
- align-self- 覆盖align-items以对齐横轴上的单个项目
- flex- 将flex-grow、flex-shrink和flex-basis合并为一个属性--决定flex项目如何改变尺寸以适应可用空间。
- flex-grow- 确定允许柔性项目增长多少以填充柔性容器中的额外空间
- flex-shrink- 确定当柔性容器中没有足够的空间时，允许柔性项目收缩多少。
- 顺序- 提供一个数字值 - 数字较低的项目向左移动，数字较高的项目向右移动
测试一下Flexbox属性!
点击下面的属性，看看它们是如何使用Flexbox Playground来影响柔性容器中的柔性项目的!
CSS Flexbox教程摘要
最初，设计师们用浮点来定位项目。后来，Flexbox出现了，它提供了一种自动排队并沿轴线排列项目的方法。Flexbox在水平或垂直轴上工作。这些都被称为主轴和横轴。这些轴的方向可以通过将Flex-direction设置为列、行逆或列逆来改变。在刚开始使用Flexbox时，坚持使用默认的行弯曲方向是有意义的。这样，你就可以在改变Flexbox容器和Flexbox项目的行为方式之前，了解所有其他属性如何工作。
