关于css:Flex布局

Flex 的含意

Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”，用来为盒状模型提供最大的灵活性。

.box {display; flex;}
.box {display; inline-flex;}

PS: 应用 Flex 布局，所有子元素的 float，clear，vertical-alig 你这些属性就会生效

Flex 的属性介绍

1.flex-direction：该属性决定主轴的方向，即排列形式，默认 row。

.box {flex-direction: row | row-reverse | column | column-reverse;}

2.flex-wrap：该属性决定子元素会不会换行，因为默认状况是在一条线上的，默认不换行，nowrap

// nowrap：不换行
// wrap：换行，第一行在下面
// wrap-reverse：换行第一行在上面
.box {flex-wrap: nowrap | wrap | wrap-reverse;}

3.flex-flow：该属性 flex-direction 属性和 flex-wrap 属性的简写模式，默认值为 row nowrap。

.box {flex-flow: row nowrap;}

4.justify-content：改属性定义了子元素在主轴上的对齐形式，默认 flex-start

// flex-start: 左对齐
// flex-end：右对齐
// center：居中
// space-between：两端对齐，两头的子元素均匀分布，子元素之间的间距都雷同。// space-around：子元素均匀分布在盒子中，然而子元素两侧都是有间距的，且间距雷同，所以，成果是，盒子两端间距是子元素和子元素之间的间距的一半。.box {justify-content: flex-start | flex-end | center | space-between | space-around:;}

5.align-items：该属性是定义子元素在穿插轴上如何对齐，默认 stretch

// flex-start：穿插轴的终点对齐。// flex-end：穿插轴的起点对齐。// center：穿插轴的中点对齐。// baseline：子元素的第一行文字的基线对齐。// stretch：如果子元素未设置高度或设为 auto，将占满整个容器的高度。.box {align-items: flex-start | flex-end | center | baseline | stretch;}

6.align-content：改属性是定义多行的对齐形式，如果只有一行，这个属性不起作用，默认 stretch

// flex-start：穿插轴的终点对齐。// flex-end：穿插轴的重点对齐
// center：穿插轴的中点对齐
// space-between：与穿插轴两端对齐，轴线之间的距离均匀分布
// space-around：每根轴线两侧的间距都相等。所以，轴线之间的距离比轴线与边框的距离大一倍
// stretch：默认占满整个穿插轴，然而每个主轴前面主轴之间有间距，最初一个主轴前面也有间距
.box {align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

子元素的属性

1.order：该属性值越小，越靠前，默认为 0

.item {order: 0;}

2.flex-grow：该属性值代表我的项目占据的大小（放大），意思是，如果三个子元素，其余两个为 1，这个为 2 的话，代表这个是两位两个的两倍大小, 并且会默认撑满这个主轴，然而，如果都是 0 的话，哪怕没有撑满整个主轴，也不会放大。

.item {flex-grow: 0;}

3.flex-shrink：该属性代表子元素占据的大小（放大），默认值为 1，不能为负值。如果所有子元素的 flex-shrink 属性都为 1，当空间有余时，都将等比例放大。然而只有值 0，就不会放大，值越大，越小。

4.flex-basis：该元素定义的话，就是子元素的宽度，默认是 auto

5.flex：该属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6.align-self：属性容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩 align-items 属性。默认值为 auto，示意继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。

写在最初

本文在参考阮一峰大佬的 Flex 解说，联合本人的了解和语言记录下来的，阮一峰大佬的原文地址如下：

阮一峰大佬的原文