Flex布局

一、 flex布局（弹性盒布局）任何容器都可以是flex布局

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

️设为Flex布局以后，子元素的float、clear和vertical-align属性将失效
二、基本概念
1.采用了flex布局的元素称为容器，它的所有子元素自动成为容器成员，称为项目。
2.容器默认有两个轴线：横轴称为主轴（main axis）竖轴称为交叉轴（cross axis）；主轴的开始位置是与左边框的交叉点（main start），结束的位置叫做（main end）；竖轴的开始位置叫做（cross start）；结束位置叫做（cross end）。
3.项目默认是沿横轴排列，单个项目占据的横轴空间（宽度）叫做main size，占据的竖轴的空间（高度）叫做cross main。

20180619133627380.png

三、容器的属性（以下的6个属性是设置在容器上的）

• flex-direction (决定了横轴的方向，即项目的排列方向)
• flex-wrap (默认项目排列在一条线上，它可以设置项目如果放不下，怎么换行)
• flex-flow (上边两个属性的简写，默认是row nowrap)
• justify-content (定义了项目在横轴上的对齐方式)
• align-items (定义了项目在竖轴上的对齐方式)
• align-content (定义了多根轴线的对齐方式，如果只有一根是不起作用的)

1.flex-direction 横轴方向

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

row(默认值)：横轴为水平方向，起点在左边
row-reverse：水平方向，起点在右边
column：横轴为垂直方向，起点在上边
column-reverse：垂直方向，起点在下边

1.png

2.flex-wrap 是否换行，换行如何显示

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(默认值)：不换行

image.png

wrap：换行，第一行在上边

image.png

wrap-reverse：换行，第一行在下边

image.png

3.justify-content 横轴如何对齐

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start：左对齐
flex-end：右对齐
center：居中对齐
space-between：两端对齐，项目之间的间隔相等
space-around：每个项目的两侧间隔相等，所以项目之间的间隔比项目与边框之间的间隔大一倍。

image.png

4.align-items 竖轴如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：上对齐
flex-end：下对齐
center：居中
baseline：项目第一行文字的基线对齐
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

image.png

5.align-content 多条轴线的对齐方式

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

flex-start：y轴上对齐
flex-end：y轴下对齐
center：y轴居中对齐
space-between：两端对齐，轴线之间的距离相等
space-around：每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边框之间的间隔大一倍
stretch（默认值）：如果没有设置高度或者高度auto，轴线占满整个交叉轴，设置了固定高度则和flex-start一样作用，上对齐

image.png

️如果使用这个属性的前提：使用 justify-content 属性对齐主轴上的各项（水平），还需要设置flex-wrap:wrap，不然不起作用。

四、项目的属性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

1.order 定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
  order: <integer>;
}

image.png

2.flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

image.png

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3.flew-shirnk 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

.item {
  flex-shrink: <number>; /* default 1 */
}

[图片上传中...(image.png-ecc772-1561872486660-0)]
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小；负值对该属性无效。
4.flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本身大小

.item {
  flex-basis: <length> | auto; /* default auto */
}

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

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

flex:auto;  //前三个属性的简写;默认是0 1 auto；auto=>1 1 auto；none=>0 0 auto
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

该属性可能取6个值，除了auto，其他都与align-items属性完全一致。

image.png

flex:1 和 flex:auto的区别
https://www.cnblogs.com/chris-oil/p/5430137.html