Flex布局模型相关

1. 作用

避免浮动布局中脱离文档流现象发生,不脱标

flex布局适合结构化布局,不脱标,可以设置宽高,一行显示多个

2. 设置方式

父元素添加display:flex.子元素自动挤压或拉伸

3. 组成部分

弹性容器 display:flex

弹性盒子

主轴 justify-content

侧轴/交叉轴 align-items

主轴属性

1. justify-content:flex-start 默认 起点排列

2. justify-content:flex-end 终点 开始排列

3. justify-content:center 居中

4. justify-content:space-between 子盒子靠边排列,中间距离自适应

5. justify-content:space-around 子盒子1:2排列

6. justify-content:space-evenly 子盒子平均分1:1排列

侧轴属性

1. align-items:stretch 默认值 拉伸,高和父元素一致,宽有内容撑开

2. align-items:flex-start 默认侧轴上方,起点排列

3. align-items:flex-end 默认侧轴下方,起点排列

4. align-items:center 侧轴居中

align-self:控制某个弹性盒子在侧轴对齐方式,添加在弹性盒子子级,属性参考上面

修改主轴方向,主轴跟换属性

flew-direction(父元素设置)

属性值

row 行,水平(默认值)

column 列,垂直,用于改变主轴方向(重点)

row-reverse 行,从右向左

column-reverse 列,从下下向上

弹性盒子换行

flew-wrap:wrap (父盒子设置)

flew-wrap:-reverse 反向换行

多行居中

align-content:(属性值参考主轴侧轴)

flew伸缩比

flew:值(值取整数)

1. 伸缩比划分的是父元素的大小

2. 伸缩比给子元素设置的

3. 伸缩比会覆盖你的宽度

圣杯布局

两边大小固定不变,中间自适应

思路:

1. 两侧盒子给固定大小

2. 中间盒子 flew:1;占满剩余空间