CSS补充-flex布局

CSS补充-flex布局

一.认识

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活。

现在企业一般都用flex不用浮动。

二.组成

设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸

组成部分：
1.弹性容器
2.弹性盒子
3.主轴：默认在水平方向
4.侧轴/交叉轴：默认在垂直方向

三.主轴对齐方式

属性名：justify-content

属性值：
flex-start：默认值，弹性盒子从起点开始依次排列。
fiex-end：弹性盒子从终点开始依次排列。
center：弹性盒子沿主轴居中排列。显示效果居中
space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间。显示效果弹性盒子之间间距相同，两端没有间距
space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧。显示效果弹性盒子之间的间距是两端间距的2倍
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。显示效果各个间距相同，包括两端间距

四.侧轴对齐方式

属性名：
align-items：当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align-self：单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值：
stretch： 弹性盒子沿着侧轴线倍拉伸至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center：弹性盒子沿侧轴居中排列
flex-start：弹性盒子从起点开始依次排列
flex-end：弹性盒子从终点开始依次排列

五.修改主轴方向

主轴方向默认是水平

属性名：
flex-direction

属性值：
1.row：水平方向，从左向右（默认）
2.column：垂直方向，从上到下

六.弹性伸缩比

作用：控制弹性盒子的主轴方向的尺寸

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

七.弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所有弹性盒子都在一行显示

属性名：flex-wrap

属性值：
wrap：换行
nowrap：不换行（默认）

八.行对齐方式

对单行弹性盒子不生效

属性名：align-content

属性值：
flex-start：默认值，弹性盒子从起点开始依次排列。
fiex-end：弹性盒子从终点开始依次排列。
center：弹性盒子沿主轴居中排列。
space-between：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间。
space-around：弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧。
space-evenly：弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。