Flex弹性盒模型常用代码

Flex弹性盒模型

给谁添加display:flex   谁就是容器（功能使所有子元素在一行显示）

它的子元素就位项目

弹性盒子是CSS3的一种新布局模式。

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

添加Flex之前：

常规流块盒的排列方式

 

添加Flex之后

 

 

设置主轴方向

默认值 从左到右依次摆放 

flex-direction: row;

 从右到左依次摆放  

flex-direction: row-reverse;

 

 从上到下依次摆放

flex-direction: column;

 

 从上到下依次摆放 

flex-direction: column-reverse;

 

 

设置项目是否换行

不换行，即所有项目在一行显示（默认值）

Flex-wrap:nowrap;

换行

注：主轴是水平方向

条件是所有项目宽度之和大于容器的宽度

注：主轴是垂直方向

条件是所有项目高度之和大于容器的高度

Flex-wrap:wrap

换行倒叙，从下到上

Flex-wrap:wrap-reverse

书写格式：主轴方向   是否换行

Flex-flow:column wrap

 

 

主轴方向上的对齐方式（justify-content为主轴方向对齐方式）

情况1：主轴时水平方向

Flex-start    左对齐  默认值

Flex-end      右对齐  

Center 居中

Space-between 两端对齐

Space-evenly  平均分配（新增）

Space-around 分散对齐

1. 获取剩余空间：容器宽度-所有项目宽度之和
2. 剩余空间/项目个数
3. 剩余空间/项目个数的值  再除以2
4. 然后把值分配给每个项目左右

两者区别为是否换行，换行就多根轴线

Align-items交叉轴对齐方式

情况1：交叉轴时垂直方向（默认）

Flex-start   顶部对齐

Flex-end   底部对齐

Center 垂直方向居中

Baseline      以文本的基线对齐

文字内分四条线：topline  middleline  baseline  bottomline

Stretch 当项目没给高的时候，就是容器的高

 

Align-content多根轴线对齐方式

Flex-start 多行顶部对齐

Flex-end 多行底部对齐

Center 多行垂直居中

Space-between 垂直方向两端对齐  

Space-evenly   垂直方向平均分配

Space-around   垂直方向分散对齐

 

Order进行项目的排序

默认值是0

取值越大，越靠后

取值越小，越靠前

 

Flex-grow  按比例放大项目

默认值为0

1. 获取剩余空间
2. 获取所有项目flex-grow的份数之和
3. 剩余空间除以flew-grow的份数之和=每一份的值
4. 按照份数，分给相应的项目
5. 

 

Flex-shrink 按比例缩小项目

默认值为1

1. 获取超出尺寸
2. 获取所有项目flex-shrink的份数之和

1. 剩余空间除以flew-shrink的份数之和=每一份的值
2. 按照份数，分给相应的项目

Flox:放大比例，缩小比例