布局超快的flex弹性布局

1.基本概念

(1)作用:基于flex精确灵活控制块级盒子的布局方式,避免浮动布局中脱离文档流现象发生.非常适合结构化布局.

​ (2)设置方式:父级元素添加display:flex;加完后就不存在显示模式的区分.

​ (3)父级叫弹性盒子,子盒子叫弹性盒子.

​ (4)弹性盒子存在一个主轴,默认为x轴.还存在一个侧轴(交叉轴).

​ (5)主轴对齐效果:相当于一排盒子在一行等间距排列,代码实现:

​ 给父盒子加 justify-content: space-between;

​ (6)flex的组成:弹性容器,弹性盒子,主轴,侧轴

2.常用语句

2.1主轴对齐方式

2.2侧轴对齐方式

2.2.1 单侧轴

2.2.2 多侧轴

调整对齐方式:align-content,取值与justify-content基本相同

2.3 flex伸缩比

给需要的弹性盒子添加,flex:1;表示该盒子占弹性容器的几份.

2.4更换主轴

2.5 弹性盒子换行

flex-wrap:wrap;
​首先弹性盒子需要有宽,第二步给父元素设置换行属性

3.小结