1.什么是flex布局
flex表示弹性布局,为盒模型提供最大的灵活性。
2.flex布局的一些基本概念
- 容器:采用flex布局的元素被称为容器
- 项目:在flex布局中的子元素被称为项目
- 项目要在容器中显示,在容器中有水平的主轴和垂直的交叉轴,项目在容器中沿主轴排列
3.容器的一些属性
1.flex-direction:设置容器主轴的方向,元素根据主轴排列。
- row:默认值,沿水平方向,从左到右
- row-reverse:沿水平方向,从右到左
- column:垂直方向,由上到下
- column-reverse:垂直方向,由下到上
2.justify-content:设置项目在容器主轴的排列方式(若主轴方向使用flex-direction改变,则根据改变后的主轴设置对齐方式)
- flex-start:默认值,从主轴的顶端对齐
- flex-end:从主轴的末端对齐
- center:居中
- space-between:先两边贴边,再分配剩余的空间
- space-around:每个项目两侧的间距相等
3.align-items:设置项目在容器交叉轴的排列方式。单行
- stretch:默认值。如果项目未设置高度或者高度为auto,将占满整个容器的高度。
- flex-start:从交叉轴的顶端对齐
- flex-end:从交叉轴的末端对齐
- center:挤在一起居中
4.align-content:设置项目在容器交叉轴的排列方式。多行,当设置了flex-wrap:wrap时才有效。单行时无效。
- flex-start:默认值,从侧轴的顶端对齐
- flex-end:从侧轴的末端对齐
- center:居中
- space-between:先两边贴边,再分配剩余的空间
- space-around:每个项目两侧的间距相等
- stretch:如果项目未设置高度或者高度为auto,将占满整个容器的高度。
5.flex-wrap:设置项目在当前容器中无法一行显示该如何处理
- nowrap:默认不换行,项目的宽度设置失效了,强制在一行显示
- wrap:正常换行,第一个位于第一行的第一个
6.flex-flow:是flex-direction和flex-wrap的简写,默认【row nowrap】
- 第一个属性是flex-direction的值
- 第二个属性是flex-wrap的值
4.项目的一些属性
- flex:子项目分配剩余空间,用flex表示占剩余空间的多少份。
- order:设置项目排列的位置,默认为0,数值越小越靠前
- align-self:当前项目和其他项目在交叉轴有不同的对齐方式。