Flexbox不是单一属性；它是一个完整的模块，具有许多功能。在本文中，我们将查看CSSFlexbox的完整指南。
在详细介绍之前，我只想回答为什么我们应该使用弹性框布局而不是使用显示属性，浮点属性，位置属性来做布局网页的传统方式
使用Flexbox的优点
Flexbox会平均分配项目的高度和宽度，即使项目是动态添加的，您也无需关心CSS属性轻松颠倒物品的结构根据容器的动态宽度轻松增加和缩小物品的宽度通过单个属性轻松控制垂直或水平元素的方向更改任何元素的顺序96％的浏览器支持flexboxFlexbox的布局
请参考下图，了解Flexbox的工作方式。
Flexbox分为两轴主轴和交叉轴。
在常规布局中，当我们使用行内显示或行内块显示时，它仅从左到右
主轴：这是默认情况下项目布局的默认轴。不一定总是水平的。根据弯曲方向，它可以是垂直的主要开始/主要结束：项目将从主要开始放置到主要结束主要尺寸：该瓦特取决于挠曲方向上的容器的ID或高度横轴：横轴垂直于主轴。交叉开始/交叉结束：从交叉开始到交叉结束开始布置项目交叉尺寸：柔性商品的宽度或高度（以交叉尺寸中的较大者为准）为该商品的交叉尺寸。十字尺寸属性是十字尺寸中“宽度”或“高度”中的任何一个。在开始使用Flexbox属性之前，我们应该了解哪些属性适用于flex容器和flex项目。
Flexbox容器属性
displayflex-directionflex-wrapjustify-contentsalign-itemsalign-contentsFlexbox项目属性
orderflex-growflex-shrinkflex-basisflexalign-selfFlexbox容器属性
显示
我们知道display属性具有内联，块，内联块等值的数量。但是，如果我们将值赋为flex，那么我们将打开flexbox上下文
1.container{display:flex}
弹性方向
flex-direction决定如何在主轴上水平或垂直布置项目
flex-direction:row
row-reverse
column
column-reverse
initial
inherit;
上面是flex-direction属性的可能值
row:行是弹性方向的默认值，其中项目将从左到右放置row-reverse:项目将从右到左放置column:项目将从上到下垂直放置column-reverse:项目将自下而上放置initial:将其值设置为默认值inherit:从父项继承值flex-wrap
flex-wrap控制如果容器宽度小于总项目宽度，则项目将移至下一行的行为。
flex-wrap:nowrap
wrap
wrap-reverse;
默认值：nowrap
no-wrap：通过调整项目的宽度来适合一行
wrap：将项目从上到下放到下一行wrap-reverse：将项目从下到上放到下一行flex-flow
flex-flow是flex-direction和flex-wrap的简写
flex-flow:flex-direction
flex-wrap
默认值：rowno-wrap
让我们看一些例子：
上面，我们看到了一个flex-flow的示例，其中flex-direction是row。您可以对flex-direction列执行相同的操作，而只需垂直考虑以上内容即可。
justify-content
justify-content用于对齐主轴上的项目。它的容器属性，以便将所有子项对齐到特定位置，例如居中，开始或结束，或在它们之间留出空间。
1justify-content:flex-start
flex-end
center
space-between
space-around
initial
inherit;
默认值：flex-start
flex-start-根据flex-direction将项目与容器的开头对齐
.container{flex-direction:row-reversejustify-content:flex-start;}
如上所示，flex-start从右侧开始，而不是从书写模式方向开始
center：将项目与中心对齐flex-end：根据flex-direction将项目与容器的末端对齐space-around：通过调整宽度在项目周围留出空间space-between：在项目之间，而不是在容器的开头和结尾之间留出空间space-evenly：在项目周围留出相等的空间start：根据写入模式方向将项目与容器的开头对齐end：按照书写模式方向将项目与容器的末端对齐align-items
align-items属性用于对齐各个横轴上的项目，就像我们为主轴指定正当内容
align-items:stretch
center
flex-start
flex-end
baseline
initial
inherit;
默认值：stretch
stretch：如果未从外部获得物品的高度，则占据容器的整个高度flex-start：考虑到横轴，将项目与容器的开头对齐center：考虑到横轴，将项目与中心对齐flex-end：考虑到与横轴对齐的项目baseline：考虑到与跨轴相关的项目内容基线的对齐项目align-content
align-content用于对齐横列中各行而不是项。
您可能对align-items和align内容之间的差异感到困惑。
让我们来看一个比较对齐项目和对齐内容的示例。
如您在上面的对齐项目中所看到的，将居中对齐项目在相应的横轴上居中，将对齐内容对齐行在相应的横轴的中心上。
我们以两行为例，因为align-content不会影响单行
弹性项目属性
使用order属性，可以重新排列容器项目的自然顺序。
默认值：0
第一个图显示了默认行为，其中所有项目的订单值均为0。
在小号的Econd图，第1项的（高亮显示的）移动到最后，因为它的顺序值大于剩余的三个大。
在第三张图中，第3项移动到第一个位置，因为它的阶次值为-1，该阶数小于其他三个项。
在Fourth图中，第1项和第3项举措，以持续，因为他们的订单价值大于其他。
弹性成长
flex-grow允许项目随着容器大小大于总项目大小而增长。
默认值：0
在上面的示例中：
第一个图显示了默认行为，其中不容纳剩余空间的项目仅占用提供给项目的宽度。
在第二张图中，您可以看到我们进行了flex-grow：1表示所有项目，这意味着所有项目均按相等的比例划分剩余空间。如果我们将所有项目的值都设为2，则它的行为相同，因为我们要给出比率值。
在第三张图中，项目2（突出显示的项目）占用的空间是其他项目的两倍，因为它的值为2，并且是其他项目值的两倍。
注意：不允许使用负值
弯曲收缩
flex-shrink属性允许项目随着容器尺寸的减小而收缩
默认值：0
如果容器中的所有项目的值为1，则所有项目将以相等的比例收缩。
并且所有项目的值为1，只有一个项目的值为2，然后该项目将缩小为其他项目的一半。
例如：
如上所示，在给定的flex-shrink中：2到第三个元素的收缩是其他元素的两倍。
不允许使用负值。
弹性基础
flex-basis只是flexbox上下文中容器项的最小宽度。
默认值：自动
例如，如果我们没有为flex-basis属性提供值，则默认情况下其值为auto，则flexbox项的宽度将等于内容宽度。
柔性
flex是flex-grow，flex-shrink和flex-basis的简写
默认值：00自动
flex-grow:flex-growflex-shrinkflex-basis
弹性值有很多可能性
/*一个值，如果是无单位数，则它的flex-grow*/flex：1;2/*一个值，宽度/高度：flex-basis*/flex：10em;弯曲：30％;挠性：分钟-内容;3/*两个值：flex-grow
flex-basis*/flex：像素;4/*两个值：flex-grow
flex-shrink*/flex：22;5/*三个值：flex-grow
弹性收缩
flex-basis*/flex：％;
align-self
align-self用于对齐各个横轴中的单个项目，它将覆盖align-items设置的值。
如您在上面的示例中看到的，我们为第2项元素指定了align-self：center，然后仅更改了该项的位置。
例子
我们学到了很多东西，所以让我们看一个实际的例子。
垂直和水平居中元素
/*一个值，如果是无单位数，则它的flex-grow*/flex：1;2/*一个值，宽度/高度：flex-basis*/flex：10em;弯曲：30％;挠性：分钟-内容;3/*两个值：flex-grow
flex-basis*/flex：像素;4/*两个值：flex-grow
flex-shrink*/flex：22;5/*三个值：flex-grow
弹性收缩
flex-basis*/flex：％;
输出将是：
创建导航栏
1//html2!DOCTYPEhtml3head4linkrel=stylesheethref=index.css/5/head6body7section8divclass=container9divclass=item/div12/div13/section14/body15/html.container{3display:flex;4width:47%;5height:px;6border:2pxsolid;7padding:5px;8}.container.item{11flex-basis:px;12height:96px;13border:2pxsolid;14justify-content:center;15color:white;16align-items:center;17background-color:cadetblue;18}
输出将是：