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讲解，结合自己的理解和语言记录下来的，阮一峰大佬的原文地址如下：

阮一峰大佬的原文