flex布局

01.flex布局

• flex是flexible Box的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局
• 当父盒子设为flex布局以后，子元素的float、clear和vertical-align属性失效
• 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
• 采用flex布局的元素，称为flex容器，简称容器，它的所有子元素自动成为容器成员，称为flex项目，简称项目
• 子容器可以横向排列也可以纵向排列(默认横向排列)

flex布局原理

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

02.常见父项属性

• flex- direction :设置主轴的方向 row col 默认row
• justify-content :设置主轴上的子元素排列方式
• flex-wrap :设置子元素是否换行
• align-content :设置侧轴上的子元素的排列方式(多行)
• align-items :设置侧轴上的子元素排列方式(单行)
• flex-flow :复合属性,相当于同时设置了flex-direction和flex-wrap

03.flex-direction属性

设置主轴的方向，元素跟着主轴排列

属性	说明
row	(默认)从左到右
column	从上到下
row-reverse	从右到左
column-reverse	从下到上

04.justify-content属性

设置主轴上的子元素排列方式

使用前确定好主轴是哪个

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

justify-content:flex-start

justify-content:flex-end

justify-content:center

justify-content:space-around

justify-content:space-between

05.flex-wrap属性

设置子元素是否换行(默认不换行)

属性	说明
nowrap	(默认)不换行
wrap	换行
wrap-reverse	颠倒换行

flex默认设置，显示不开会缩小其他元素的大小 flex-wrap:nowrap;


flex-wrap: wrap;

flex-wrap:wrap-reverse;

06.align-items属性(单行)

设置侧轴上的元素排列方式，在子项为单项(单行)的时候使用

属性	说明
flex-start	(默认)从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸

align-items: flex-start;

align-items: flex-end;

align-items: center; 设置了justify-content: center;

align-items: stretch; 侧轴是Y轴，去掉子元素的高度才能实现(如果是X轴则去掉宽度)

07.align-content属性(多行)

设置侧轴上的元素排列方式，只能在子项出现换行(多行)的时候使用

属性	说明
flex-start	(默认)在侧轴头部开始排列
flex-end	在侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先分布在两边，再平分剩余空间
stretch	设置子项元素高度平分父元素高度

align-content: flex-start;

align-content: flex-end;
align-content: center;

align-content: space-around;

align-content: space-between;

align-content: stretch;

08.flex-flow属性

flex-flow是flex-direction和flex-wrap属性的复合属性

flex-flow: row wrap; 设置主轴为x轴，自动换行

09.常见子项属性

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

10.flex属性

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

flex:0.2 五个div五等分

flex:0.1 flex:0.2 flex:0.3 flex:0.3 flex:0.1

两边固定中间均分
中间3个div flex:0.3 flex:0.4 flex:0.3

11.align-self属性

控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

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

12.order属性

定义项目的排列顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样

4号span排第一，2号span排第二

2021.02.24 0:41