Flex布局

目录

一.布局原理

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

二、Flex布局

（一）常见父项属性

1.flex-direction：设置主轴的方向;

2. flex-wrap：设置主轴上的子元素排列方式;

3.flex-flow ；是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap;

4. justify-content属性定义了项目在主轴上的对齐方式;

5.align-items:设置侧轴上的子元素排列方式（单行）；

6.align-content:设置侧轴上的子元素的排列方式（换行/多行，单行没效果）；

（二）常见子项属性

1.flex:定义子项目分配剩余空间，用flex表示占的份数；

2.align-self:控制子项自己在侧轴上的排列方式

3.order：定义项目的排列顺序

---

一.布局原理

flex是flexible Box的缩写，意为“弹性布局”，用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局；

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

采用flex布局的元素，称为Flex容器，简称“容器”，他的所有子元素自动成为容器成员，称为flex项目，简称“项目”；

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

2.常规文档流的显示方式

二、Flex布局

1.display:flex; 容器添加弹性布局后，显示为块级元素；

display:inline-flex; 容器添加弹性布局后，显示为行级元素；

设为 Flex布局后，子元素的float、clear和vertical-align属性将失效。但是position属性，依然生效。

（一）常见父项属性

1.flex-direction：设置主轴的方向;

• row：从左到右
• row-reverse
• column：从上到下
• column-reverse

2. flex-wrap：设置主轴上的子元素排列方式;

• nowrap：不换行（默认）

• wrap：换行

• wrap-reverse：换行反转

3.flex-flow ；是flex-direction和flex-wrap的缩写形式，默认值为：flex-flow: row wrap;

4. justify-content属性定义了项目在主轴上的对齐方式;

• flex-start:头部开始，从左到右
• flex-end:从尾部开始
• center：在主轴居中对齐
• space-around：平分剩余空间
• space-between：先两边贴边，再平分剩余空间

5.align-items:设置侧轴上的子元素排列方式（单行）；

• flex-start:从上到下；
• flex-end:从下到上；
• center:挤在一起居中；
• stretch:拉伸；

例子：垂直居中：

justify-content: center;
align-items: center;

6.align-content:设置侧轴上的子元素的排列方式（换行/多行，单行没效果）；

• flex-start:从上到下；
• flex-end:从下到上；
• center:挤在一起居中；
• space-around:子项再侧轴平分剩余空间；
• space-between:子项再侧轴先分布再两头，再平分剩余空间；
• stretch:设置子项元素平分父元素

（二）常见子项属性

1.flex:定义子项目分配剩余空间，用flex表示占的份数；

flex:1;

2.align-self:控制子项自己在侧轴上的排列方式

• flex-start:从上到下；
• flex-end:从下到上；
• center:挤在一起居中；
• space-around:子项再侧轴平分剩余空间；
• space-between:子项再侧轴先分布再两头，再平分剩余空间；
• stretch:设置子项元素平分父元素

div span:nth-child(3){
    align-self: flex-end;
}

3.order：定义项目的排列顺序

数值越小，越靠前，默认是0