一、Flex布局是什么？

Flex是Flexible Box的缩写，意思是“灵活布局”，用于为盒装型号提供最大的灵活性。

您可以将任何容器指定为Flex 布局。

.box{ display: flex;} 您还可以将Flex 布局与内联元素一起使用。

.box{ display: inline-flex;} 具有Webkit核心的浏览器必须添加-webkit前缀。

.box{ display: -webkit-flex; /* Safari */display: flex;} 请注意，设置为Flex 布局会禁用子元素上的浮动、清除和垂直对齐属性。

二、基本概念

使用Flex 布局的元素称为Flex 容器或“容器”。它的所有子元素都会自动成为容器成员，并称为Flex 项目，简称“项目”。

容器默认有两个轴：水平主轴（main axis）和垂直交叉轴（cross axis）。主轴（与边界线相交）的起始位置称为主起始，结束位置称为主轴结束，相交轴的起始位置称为交叉起始，结束位置称为交叉结尾。

默认情况下，项目沿主轴对齐。一项在主轴上占据的空间称为主尺寸，一项在横轴上占据的空间称为横向尺寸。

三、容器的属性

该容器有六个属性：

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content3.1 flex-direction 属性

flex-direction 属性确定主轴的方向（即项目对齐的方向）。

.box { flex-direction: row | row-reverse | column-reverse;} 可以有四个值。

row（默认）：主轴是水平的，起点在左边缘。 row-reverse：主轴是水平的，起点在最右边。柱：主轴垂直，起点在顶部。 column-reverse：主轴垂直，起点在底边。 3.2 Flex包裹属性

默认情况下，项目排列在一条直线（也称为“轴”）上。 flex-wrap 属性定义了当一个轴不适合时如何换行。

.box{ flex-wrap: nowrap | Wrap-reverse;} 可以采用三个值。

（1）nowrap（默认）：不换行。

(2) 换行：以第一行开头换行。

(3) 反向换行：将下面第一行换行。

3.3 柔性流

flex-flow 属性是flex-direction 和flex-wrap 属性的简写。默认值为row nowrap。

.box {flex-flow: flex-direction || flex-wrap;}3.4 justify-content 属性

justify-content 属性定义项目在主轴上的对齐方式。

.box { justify-content: flex-start | space- Between | space-around;} 有五个值，具体位置是相对于轴方向的。下面我们假设主轴是从左到右。

flex-start（默认）：左对齐flex-end：右对齐center：居中对齐space- Between：两端对齐，使项目之间的间距相等。 space-around：每个项目在两侧均匀分布。因此，项目之间的间距是项目和边框之间的间距的两倍。 3.5 对齐项目属性

align-items 属性定义项目如何在横轴上对齐。

.box {align-items: flex-start | flex-end center | 可以取5个值。具体的排列方式与交叉轴的方向有关。下面，我们假设横轴是从上到下。

flex-start：对齐交叉轴的起点。 flex-end：对齐交叉轴的端点。 center：对齐交叉轴的中点。 Baseline: 项目文本第一行的基线对齐方式。拉伸（默认值）：如果项目没有设置高度或设置为自动，则项目将占据容器的整个高度。 3.6 对齐内容属性

align-content 属性定义多个轴上的对齐方式。如果项目只有一个轴，则此属性无效。

.box {align-content: flex-start | flex-end center | space-around | 该属性可以有六个值。

flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的末端对齐。 center：与交叉轴的中点对齐。 space- Between：相交轴两端的轴之间的间距相等。 space-around：每个轴两侧等距。因此，轴之间的距离是轴与框架之间的距离的两倍。拉伸（默认）：轴占据整个相交轴。

四、项目的属性

该项目有六个属性集：

orderflex-growflex-shrinkflex-basisflexalign-self4.1 订单属性

order 属性定义项目的排序顺序。值越低，排名越高。默认值为0。

.item { order: 整数；} 4.2 flex-grow 属性

flex-grow 属性定义项目的增长率。默认值为0。也就是说，如果有剩余空间，则不会扩展。

.item { flex-grow:number; /* 默认0 */} 如果所有项目的flex-grow 属性均为1，则剩余空间（如果有）将被平均分配。如果一个项目的flex-grow 属性为2 而所有其他项目为1，则前者将占用其他项目两倍的剩余空间。

4.3 Flex收缩属性

flex-shrink 属性定义项目的收缩率。默认值为1。也就是说，如果空间不足，物品就会缩小。

.item { flex-shrink:number; /* 默认1 */} 如果所有项目的flex-shrink 属性为1，则如果空间不足，所有项目都会按比例缩小。如果一个项目的flex-shrink 属性为0，另一个为1，则如果空间不足，前者不会收缩。

负值对该属性无效。

4.4 基于Flex 的属性

flex-basis 属性在分配任何额外空间之前定义项目的主要大小。浏览器使用此属性来计算主轴上是否有额外空间。默认值为auto，即项目的原始大小。

.item { flex-basis: length | auto; /* default auto */} 可以设置为与width 或height 属性相同的值（例如350px），在这种情况下该item 占据固定的空间。

4.5 Flex 属性

flex 属性是flex-grow、flex-shrink 和flex-basis 的缩写。默认值为0 1 自动。最后两个属性是可选的。

.item { flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ]} 该属性有两个快捷值：auto (1 1 auto) 和none (0 0 auto)。

建议您首先使用此属性，而不是分别编写三个单独的属性，因为浏览器会推断相关值。

4.6 自我对齐属性

该align-self属性允许您以不同于其他项目的方式对齐单个项目，并覆盖align-items属性。默认值为auto，如果没有父元素，则继承父元素的align-items属性。

.item {align-self: auto | flex-end |基线|stretch;}此属性与align-items属性完全匹配，除了auto。

来源：阮一峰博客

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

版权声明：本文转载于网络，版权归作者所有。如有侵权，请联系本站编辑删除。