【CSS】Flex弹性布局

示例：

Flex的布局原理：

Flexible Box，意思是弹性布局，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

• 当我们为父盒子设置flex布局以后，子元素的float、clear和vertical-align属性将失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

注：在这里不需要浮动就可以使多个div在同一行，所以float和clear失效。flex可以让盒子垂直居中，所以vertical-align也将失效。

采用Flex布局的元素称为Flex容器（Flex container），它的所有子元素自动称为容器成员，称为Flex项目（Flex item）。

• 实例中的div就是flex父容器
• span就是子容器flex item
• 子容器可以横向排列也可以纵向排列，因为flex布局有横纵两个轴

总结：通过给父盒子添加flex属性，来达到控制子盒子的位置和排列方式的效果。

Flex布局父项常见的属性：

• flex-direction：设置主轴的方向（默认是x轴 row，y轴是侧轴）
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行（默认是不换行的，如果div挤不下就会缩小子元素的宽度）
• aligh-content：设置侧轴上的子元素的排列方式（多行）
• align-items：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

justify-content的属性值

属性值	说明
flex-start	默认值，从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列
center	在主轴居中对齐（如果主轴是x轴则水平居中）
space-around	平分剩余空间
space-between	先两遍贴边，再平分剩余空间

 

想使子元素垂直水平居中只需要在父盒子中加入

justify-content: center;
align-items: center; /*适用于子元素是单行*/

注：

align-content和align-items的区别：align-items适用于单行的情况下，只有上对齐，下对齐，居中和拉伸。align-content适用于多行的情况下，可以设置上对齐，下对齐，居中，拉伸以平分剩余空间等属性值。

 

Flex布局中子项常见属性：

• flex子项目占的份数
• align-self控制子项自己在侧轴的排列方式
• order属性定义子项的排列顺序（前后顺序）

flex属性：定义子项目分配剩余空间，用flex来表示占多少分数。

示例：左右两侧的div固定，中间自适应

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items的属性，默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

示例

 

 

使用order属性可以改变盒子的顺序

示例