持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
1、常见fiex面试题
- flex是那三个属性的简写？
- 说下flex一些常用的属性。
- 实现指定的布局效果。
2、flex 布局是什么？
Flex 是 Flexible Box 的缩写，意为"弹性布局", 给一个容器设置Flex布局。
.container {
display: flex;
}
采用Flex布局的元素，称为 Flex 容器（父级)。它的所有子元素自动成为容器成员（子级）.
3、容器(父级)的属性
6个属性
| 属性 | 值 |
|---|---|
| flex-direction | row ｜row-reverse ｜ column ｜ column-reverse |
| flex-wrap | nowrap ｜ wrap ｜ wrap-reverse |
| flex-flow | flex-direction ｜ flex-wrap （简写形式） |
| justify-content | flex-start ｜ flex-end ｜ center ｜ space-between ｜ space-around |
| align-items | flex-start ｜ flex-end ｜ center ｜ baseline ｜ stretch |
| align-content | flex-start ｜ flex-end ｜ center ｜ space-between ｜ space-around ｜ stretch |
flex-direction
flex-direction属性决定子级排列方向。
.box {
flex-direction: row ｜row-reverse ｜ column ｜ column-reverse；
}
row（默认值）：x轴方向，起点在左端。
row-reverse：x轴方向，起点在右端。
column：y轴方向，自上而下。
column-reverse：y轴方向，自下而上。
flex-wrap
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
默认情况下，子级都排在一行， 当子级过多宽度超过父级时候子级将会被挤压。flex-wrap属性定义，如果一行排不下，如何换行。
.container {
display: flex;
width: 300px;
border: 1px solid;
}
.box {
margin: 5px;
width: 200px;
height: 100px;
background: magenta;
}
nowrap（默认）：不换行。.box 被挤压成140px
wrap：换行
wrap-reverse：换行颠倒。
flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
flex-start
flex-end
center
space-between
space-around
align-items
align-items属性定义子级在容器内的对齐方式。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-start
flex-end
center
baseline
子级的第一行文字的基线对齐
stretch
如果子级未设置高度，将占满整个容器的高度。
align-content
align-content属性定义了子级在容器内Y轴上下的对齐方式, 与flex-wrap: wrap;配合使用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start
flex-end
center
space-between
space-around
stretch（默认值）
如果子级未设置高度，将自动占满整个容器的高度。
4、元素(子级)的属性
6个属性
| 属性 | 值 |
|---|---|
| order | type: number（排列顺序：数字类数值越小越靠前） |
| flex-grow | type: number（放大比例：默认为0） |
| flex-shrink | type: number（缩小比例：默认为1） |
| flex-basis | px子级占据固定空间 |
| flex | flex-grow, flex-shrink 和 flex-basis的简写 |
| align-self | auto ｜ flex-start ｜ flex-end ｜ center ｜ baseline ｜ stretch |
order
排列顺序。数值越小，排列越靠前，默认为0。
flex-grow
放大比例，默认为0，即如果存在剩余空间，也不放大，常用于子级不设置width宽度自适应。
如果所有项目的flex-grow或flex属性都为1，则它们将等分剩余空间。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
注意：flex-grow 优先级大与
width，flex-grow设为1，width为固定值，当有剩余空间时候width将加上剩余空间。
flex-shrink
缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis
属性定义了在分配多余空间之前，子级占据的宽度,相当于width属性，但优先级大与width，默认值为auto。
.box {
margin: 5px;
height: 40px;
width: 50px;
background: magenta;
flex-basis: 60px;
}
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self
align-self属性允许单个子级与其他子级不一样的对齐方式，可覆盖父级align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
父级 align-items: flex-start; 子级2 align-self: flex-end;
5、总结、解答面试题
- flex是那三个属性的简写？
flex属性是flex-grow,flex-shrink和flex-basis的简写 - 说下flex一些常用的属性。
能说多少就多少 - 实现指定的布局效果。
各种居中、圣杯布局、骰子的布局看需求实现。
