flex布局

flex布局/弹性布局

优点：

1.是以一种浏览器提倡的布局模型

2.布局更加简单，灵活

3.避免浮动脱标问题

作用：

基于flex精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生

设置方式：

父元素添加display：flex，子元素可以自动挤压或者拉伸

组成部分：

1.弹性容器

2.弹性盒子（没用元素之分）

3.主轴（默认x轴）

4.侧轴/交叉轴（默认y轴）

flex布局主轴的排列方式

给弹性容器加

默认值，起点开始排列

justify-content: flex-start;

终点开始排列

justify-content: flex-end;

子元素居中 重点记下

justify-content: center;

两边靠边中间自适应 重点记下

 justify-content: space-between;

盒子平均分,平均分成1比2的比例

justify-content: space-around;

盒子平均分,平均分成1比1的比例

justify-content: space-evenly;

flex布局侧轴的排列方式

给弹性容器加

从上开始排列

 align-items: flex-start;

从下开始布局

align-items: flex-end;

居中布局

 align-items: center;

默认值,stretch拉伸 在子盒子没有高时 拉伸成父元素一致的高度

 align-items: stretch;

fkex布局的伸缩比

属性 flex：值

取值分类：数值（整数）

注意点：

1.伸缩比 给子盒子加

2.平分的是父元素的宽度

3.设置了伸缩比之后设置宽度是无效的

使用flex-direction改变元素排列方式

主轴默认是水平方向，侧轴默认是垂直方向

修改主轴方向属性：flex-direction

默认值 水平方向

1.浮动（水平方向），所以不需要清除浮动不生效

2.flex布局没有元素之分，所以元素转换不生效

3.verdical-align(图片文字对齐）不生效

4.定位是生效的（脱离了标准流，flex布局是标准流）

定位的层级大于标准流 所以如：相对定位不脱标的定位 也生效

默认值

flex-direction:row;

修改为垂直方向

 flex-direction: column;

行 从右到左

flex-direction: row-reverse;

列 从下向上

 flex-direction: column-reverse;

子盒子换行

flex-warp:warp；

特性： 给父亲添加了 display: flex; 所有的子盒子（弹性盒子）都会在一行显示，不会自动换行。

弹性盒子换行显示 : flex-wrap:warp；

多行盒子侧轴对齐方式

从上到下开始对齐

align-content:flex-start;

从下向上开始对齐

align-content:flex-end;

多行盒子居中

align-content：center;

多行侧轴靠边

align-content:space-between;

侧轴1比2比列对齐

align-content:space-around;

侧轴1比1比例对齐

align-content:space-evenly;