一、介绍flex

弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以扩展以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，若一个元素使用了flex弹性布局，则会在内部形成BFC

二、主轴与交叉轴

采用flex布局的元素，称为容器(flex container)，它的所有子元素都是容器的项目(flex item)，容器默认存在两个轴: 水平的主轴main axis和垂直的交叉轴cross axis。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

三、容器的属性

1.flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向)

flex-direction: row | row-reverse | column | column-reverse;

row默认值：主轴为水平方向，起点在走端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

flex-direction: row

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

2.flex-wrap

flex-wrap属性决定项目超出后换不换行

flex-wrap: nowrap | wrap | wrap-reverse;

nowrap默认值：不换行(项目宽度超出后会进行宽度压缩)
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

3.flex-flow

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

flex-flow: <flex-direction> <flex-wrap>;

4.justify-content

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

justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;

flex-start默认值：主轴的起点对齐
flex-end：主轴的终点对齐
center：居中
space-around：每个项目两侧的间隔相等。左右两个项目距离边框是项目之间距离的一半
space-between：每个项目两侧的间隔相等。左右两个项目跟边框没有距离
space-evenly：每个项目两侧的间隔相等。左右两个项目跟边框的距离跟项目之间距离一致

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-around;

justify-content: space-between;

justify-content: space-evenly;

5.align-items

align-items属性定义项目在交叉轴上对齐方式(只有一行的情况下)

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start(项目设置高度时的默认值)：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch(若项目没设置高度或auto的默认值)：将占满整个容器的高度

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

6.align-content

align-content属性定义了多根轴线的对齐方式，前提是需要设置换行，否则不生效

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start(项目设置高度时的默认值)：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
space-around：每个项目两侧的间隔相等。左右两个项目距离边框是项目之间距离的一半
space-between：每个项目两侧的间隔相等。左右两个项目跟边框没有距离
stretch(若项目没设置高度或auto的默认值)：轴线占满整个交叉轴

align-content: flex-start;

align-content: flex-end;

align-content: center;

align-content: space-around;

align-content: space-between;

align-content" stretch;

四、项目的属性

1.order

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以是负数

order: <integer(整数)>;

.item:nth-child(1) {
    order: 0;
}
.item:nth-child(2) {
    order: 1;
}
.item:nth-child(3) {
    order: 2;
}

.item:nth-child(1) {
    order: 0;
}
.item:nth-child(2) {
    order: 1;
}
.item:nth-child(3) {
    order: -1;
}

.item:nth-child(1) {
    order: 0;
}
.item:nth-child(2) {
    order: -2;
}
.item:nth-child(3) {
    order: -1;
}

2.flex-grow

flex-growflex容器中剩余空间的多少应该分配给项目，也称为扩展规则。最终的项目的宽度为: 自身宽度 + 容器剩余空间分配宽度，flex-grow最大值是1，超过1按照1来扩展

flex-grow: <number>;
/* default 0 */

flex-grow: 0;

不分配剩余空间宽度

flex-grow: 0.5;

分配剩余空间的一半宽度

flex-grow: 1;

分配剩余空间

多个项目设定flex-grow的值不为0

会根据flex-grow的值，平均分配剩余空间

3.flex-shrink

flex-shrink属性指定了flex元素的收缩规则。flex元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据flex-shrink的值，默认值是1

当第一个元素的宽度是200，第二个元素的宽度是260，父元素为360时(当元素的flex-shrink都为1且总和超出父元素的宽度时，都是按照原本元素宽度的比例进行收缩)

若将第一个元素设置为flex-shrink: 0;0则代表不收缩，按照元素实际宽度展示

4.flex-basis

flex-basis指定了子项在容器主轴方向上的初始大小，优先级高于自身的宽度width

flex-basis: 0 | 100% | auto | <length(有单位的:100px等)>;

指定元素宽高为200px，设定flex-basis: 300px;

设定flex-basis: 0;元素的宽度按元素内容来看，无内容则消失

设定flex-basis: 100%;元素的宽度占满整个容器

设定flex-basis: auto;元素的宽度无变化

5.flex

flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选

flex: none | [<flex-grow> <flex-shrink>? || <flex-basis>];

例如flex: 1;实际上是flex-grow: 1;其余没设置

6.align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，若没有父元素，则等同于stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;

auto：继承父元素align-items属性
flex-start(项目设置高度时的默认值)：交叉轴的起点对齐
flex-end：交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐
stretch(若项目没设置高度或auto的默认值)：将占满整个容器的高度

Flex弹性布局