弹性布局

CSS常用属性

弹性布局

display:flex;

弹性布局改变容器内部的布局方式：从流式布局 —> flex布局

主轴：默认为盒子水平方向，可以通过属性改变主轴方向。
交叉轴：与主轴垂直的即是交叉轴。

属性

1. flex-direction：容器内项目的排列方向(默认横向排列)

取值
row	水平排列（左 —> 右）
row-reverse	水平排列（右 —> 左）
column	垂直排列（上 —> 下）
column-reverse	垂直排列（下 —> 上）
initial	设置该属性的默认值
inherit	从父元素继承该属性

2. flex-wrap：容器内项目换行方式

取值
nowrap	规定灵活的项目不拆行或不拆列
wrap	规定灵活的项目在必要的时候拆行或拆列
wrap-reverse	在必要的时候拆行或拆列，但是以相反的顺序
initial	设置该属性的默认值
inherit	从父元素继承该属性

3. flex-flow：以上两个属性的简写方式
4. justify-content：项目在主轴上的对齐方式

取值
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前、之间、之后都留有空白的容器内
initial	设置该属性的默认值
inherit	从父元素继承该属性

5. align-items：目在交叉轴上如何对齐

取值
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中心
baseline	与子元素中的文字有关，根据每个子元素中第一行文字的位置，决定每个子元素对齐方式
stretch	默认值，元素被拉伸以适应容器

6. align-content：定义了多根轴线的对齐方式，如果项目只有一根轴线，不起作用

取值
flex-start	项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中心
space-between	项目位于各行之间留有空白的容器内
space-around	项目位于各行之前、之间、之后都留有空白的容器内
stretch	默认值，元素被拉伸以适应容器