一、弹性布局概念
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性
对于特殊布局非常不方便,比如,垂直居中
注:常用的全屏居中的CSS
body {
height: 100vh;
text-align: center;
line-height: 100vh;
}
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
Webkit内核的浏览器,必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
二、基础概念
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。
它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三、容器的属性
以下6个属性设置在容器上:
flex容器上的属性 | 属性值 | 说明 |
---|---|---|
flex-direction | row (默认) / row-reverse / column / column-reverse | 主轴的方向(即项目的排列方向) |
flex-wrap | nowrap (默认) / wrap / wrap-reverse | 换行 (项目多行排列) |
flex-flow | row nowrap(默认) / 其他值参考上俩行 | flex-direction和flex-wrap的简写,默认 : row nowrap |
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-wrap
flex-flow
justify-content
align-items
备注说明 :
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content
四、项目的属性
以下6个属性设置在项目上:
flex项目上的属性 | 属性值 | 说明 |
---|---|---|
order | integer(默认 : 0) | 项目的排列顺序。数值越小,排列越靠前 |
flex-grow | number(默认 : 0) | 项目的放大比例,存在剩余空间,也不放大 |
flex-shrink | number(默认 : 1) | 定义了项目的缩小比例,存在空间不足,该项目将缩小 |
flex-basis | length | 在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小 |
flex | none / flex-grow flex-shrink flex-basis(默认: 0 1 auto) 后两个属性可选 | flex-shrink 和 flex-basis的简写(建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值) |
align-self | auto / flex-start / flex-end / center / baseline / stretch | 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch |
order
flow-grow
flex-shrink
flex
align-self
本文章借鉴于:
https://www.runoob.com/w3cnote/flex-grammar.html