css布局——flex布局

前言：

flex布局原理

flex是flexble box 的缩写，意为“弹性布局”，用来为盒子模型提供最大的灵活性，任何一个容器都能指定flex布局

注意：

当我们为父盒子指定flex布局以后，子元素的float，clear 和vertical-align属性将失效

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

flex布局总结原理

就是是通过给父盒子添加flex属性来控制子盒子的位置和排列顺序

---

目录

1.常见父项属性

2.flex-direction设置主轴方向

主轴和侧轴

效果展示

3.justify-content设置主轴上的子元素排列方式

效果展示

 4.flex-wrap设置子元素换行

效果展示

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

效果展示：

6.align-content设置侧轴上的子元素排列方式（多行）

效果展示

 7.flex-flow

8.flex布局子项属性

1.flex属性

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

 效果展示

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

效果展示

谢谢观看！！！我们下期再见！！！

---

1.常见父项属性

• flex-direction：设置主轴方向
• justify-content：设置主轴上的子元素排列方式
• flex-wrap：设置子元素是否换行
• align-content:设置侧轴上的子元素排列方式（多行）
• align-itms：设置侧轴上的子元素排列方式（单行）
• flex-flow：复合属性，同时设置 flex-direction flex-wrap

这些属性都是写在父项中

2.flex-direction设置主轴方向

主轴和侧轴

在flex布局中，是分为主轴和侧轴两个方向

• 默认主轴方向就是x轴方向，水平方向
• 默认侧轴方向就是y轴方向，水平向下

flex-direction属性决定主轴方向（项目的项列方向）

注意：主轴和侧轴是会变化的，就看flex-direction  设置谁为主轴，剩下的就是侧轴，页面的子元素是跟着主轴来排列的

语法：

div {
 display: flex;
 flex-direction: row;
}

属性值	说明
row	主轴为x轴 从左到右排列  默认
row-reverse	从右到左排列
column	主轴为y轴 从上到下
column-reverse	从下到上

效果展示

---

3.justify-content设置主轴上的子元素排列方式

justify-content 定义了项目在主轴上的排列方式 ，使用前一定要确定好主轴

语法：

div {
 display: flex;
 flex-direction: row;
 justify-content:center;
}

属性值	说明
flex-start	默认值 ，从头开始排列
flex-end	从尾部开始排列
center	主轴居中对齐
space-around	平分剩余部分
space-between	先两边对齐再平分剩余部分

效果展示

---

 4.flex-wrap设置子元素换行

默认情况之下。项目都是排列在一条线上（轴线）。flex-wrap属性定义，flex布局中默认是不换行的

语法：

div {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
}

属性值	说明
nowrap	默认不换行
wrap	换行

 在flex布局中就算子元素宽度超过父元素，子元素也会在父元素内一行内显示，子元素宽度缩小

效果展示

---

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

该属性是控制子项在侧轴上的排列方式，在子项为而单行时使用

语法：

div {
 display: flex;
 flex-direction: row;
 align-items: center;
}

属性值	说明
flex-start	从上到下排列 默认
flex-end	从下到上排列
center	对于侧轴局中
stretch（不能给高度）	拉伸

效果展示：

---

6.align-content设置侧轴上的子元素排列方式（多行）

设置子项在侧周上的排列方式是但是只能用于子项为多行的情况下，单行下没有效果

语法：

div{
 display: flex;
 flex-direction: row;
 align-content: center;
}

属性值	说明
flex-start	默认值 ，从头开始排列
flex-end	从尾部开始排列
center	侧轴居中对齐
space-around	平分侧轴剩余部分
space-between	先两边对齐再平分侧轴剩余部分
stretch	设置子项元素平分父元素空间

效果展示

---

 7.flex-flow

flex-flow属性是flex-direction和flex-wrap的合并写法

语法：

div {
 display: flex;
 flex-flow: row nowrap;
}

---

8.flex布局子项属性

• flex子项占的份数
• align-self控制单各子项在侧轴的排列方式
• order 定义子项排列

这些属性都是写在子项中

1.flex属性

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

语法：

div{
 flex: 1;
}

---

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

align-self控制单各子项在侧轴的排列方式，会覆盖align-items属性

默认值为auto 表示继承父元素的align-items 如果没有父元素就同等于stretch

语法：

div {
 align-self: center;
}

属性中	说明
flex-start	从上到下排列 默认
flex-end	从下到上排列
center	对于侧轴局中
stretch（不能给高度）	拉伸

 效果展示

---

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

语法：

div {
 order: 1;
}

数值越小，排列越靠前，默认值为0；

效果展示

---

谢谢观看！！！我们下期再见！！！