前端学习3 flex布局
1.Flex容器
任何一个容器都可以被指定为Flex布局，这样容器内部的元素就可以使用Flex进行布局。
-
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。
-
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”
2.Flex属性
1.flex-direction: 设置主轴的方向(默认为水平方向，起点在左端)
2.justify-content: 设置主轴上的子元素排列方式
3.flex-wrap: 设置子元素是否换行
4.align-content: 设置侧轴上子元素的排列方式（多行）
5.align-items: 设置侧轴上的子元素排列方式（单行)
6.flex-flow: 复合属性，相当于同时设置了flex-direction和flex-wrap
2.1 flex-direction
设置主轴的方向
| row | 从左到右(默认值) |
| row-reverse | 从右向左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
2.2 justify-content
设置主轴上的子元素排列方式
| flex-start | 从头部开始，如果主轴是x轴，则从左到右(默认) |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐 |
| space-around | 每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。（不贴边） |
| space-between | 先两边贴边再平分剩余空间 |
2.3 flex-wrap
设置子元素是否换行
| nowrap | 不换行（默认值） |
| warp | 换行 |
默认情况下，项目都排在一条线上（即flex布局中，默认的子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面）
2.4 align-items
设置侧轴上的子元素排列方式（单行）
| flex-start | 从上到下（假设主轴为水平方向，默认） |
| flex-end | 从下到上 |
| center | 在侧轴居中对齐 |
| baseline | 项目的第一行文字的基线对齐 |
| stretch | 如果项目未设置高度或设为auto,将占满整个容器的高度 |
2.5 align-content
设置侧轴上的子元素的排列方式（多行）
align-content定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用（多行，即flex-wrap: wrap）
| flex-start | 侧轴的的起点对齐 |
| flex-end | 侧轴的终点对齐 |
| center | 侧轴的的中点对齐 |
| space-between | 与侧轴两端对齐,轴线之间的间隔平均分布。（贴边） |
| space-around | 每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框的间隔大一倍（不贴边） |
| stretch | 轴线占满整个交叉轴（默认值） |
3.项目的属性（子元素）
3.1 order
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
3.2 flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
3.3 flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
3.4 flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（mainsize）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
3.5 align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
#前端CSS#
投递美团等公司6个岗位 >
查看14道真题和解析