css中的flex布局

Flex布局/弹性布局：

是一种 布局模型

布局网页 更简单、灵活

避免 浮动脱标 的问题

设置方式

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

组成部分

弹性容器

弹性盒子

主轴

侧轴 / 交叉轴

主轴方向

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

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

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

 

对齐方式 

主轴对齐方式

修改主轴对齐方式属性: justify-content

侧轴对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器）

align-self： 控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

 

弹性盒子换行

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

调整行对齐方式 ：align-content

取值与justify-content相同 

伸缩比

flex : 值

取值分类

数值 (整数)或百分比

注意 : 只占用父盒子剩余尺寸

总结

设置Flex布局的属性是什么

display: flex

主轴相关知识

默认方向  水平

修改主轴位置的属性  flex-direction

设置主轴对齐方式的属性  justify-content

修改侧轴位置的属性   align-items

弹性盒子换行   flex-wrap: wrap;

伸缩比  flex: 值