Flex布局学习笔记

Flex布局学习笔记

一、知识点

1、如何触发弹性盒子

给父元素添加一个display属性，并且将取值设置成flex
其父元素叫做伸缩容器，其本身叫做伸缩项目

2、主轴方向

使用flex-direction调整主轴方向

• row 水平从左到右
• row-reverse 水平从右到左
• column 垂直从上到下
• column 垂直从下到上

3、主轴换行方式

使用flex-wrap调整主轴换行方式

• nowrap 不换行
• wrap 伸缩容器不够则自动往下换行
• wrap-reverse 伸缩容器不够则自动往上换行

4、调整主轴方向、主轴换行方式的复合属性

使用flex-flow调整主轴方向和主轴换行方式

flex-flow:row wrap;

5、主轴对齐方式

使用justify-content调整主轴对齐方式

• flex-start 主轴的起始位置
  

• flex-end 主轴的结束位置
  

• center 中间对齐
  

• space-around 项目均匀的分布在一行中，项目与项目之间的距离是项目与边缘距离的2倍
  

• space-between 项目均匀的分布在一行中，项目与项目之间的距离是相等的，项目与边缘之间没有距离
  

• space-evenly 项目均匀的分布在一行中
  

6、侧轴对齐方式（一行）

使用align-items调整单行侧轴对齐方式

• flex-start 侧轴的起始位置
  

• flex-end 侧轴的结束位置
  

• center 侧轴的中间位置
  

• baseline 基线对齐
  

• stretch 默认值，拉伸到整个父容器，前提是伸缩项目不能给高度

7、侧轴对齐方式（多行）

使用align-content调整多行侧轴对齐方式

• flex-start 侧轴的起始位置对齐
  

• flex-end 侧轴的结束位置对齐
  

• center 侧轴的中间位置对齐
  

• space-around 伸缩项目之间的距离相等，是伸缩项目与边缘之间距离的2倍
  

• space-between 伸缩项目之间的距离相等，且伸缩项目与边缘之间无距离
  

• space-evenly 伸缩项目之间的距离相等，是伸缩项目与边缘之间距离的1倍

• stretch 默认值，拉伸多行伸缩项目的高度使其平分伸缩盒模型（前提是不能提前设置伸缩项目的告诉）

8、伸缩项目——伸

为伸缩项目添加flex-grow

• 若所有伸缩项目的属性值都为1，则它们平分剩余的空间

• 若三个伸缩项目的属性值为1、2、3，则分别瓜分1/1+2+3、2/1+2+3、3/1+2+3的空间

9、伸缩项目——缩

为伸缩项目添加flex-shrink
定义了项目的压缩比例，默认值为1

例：3个收缩项目，宽度分别为200、300、200，flex-shrink值分别为1、2、3
需要总宽度为700，但目前容器只有400，还差300
计算分母：200×1+300×2+200×3=1400
计算比例：
项目1：200×1/1400=比例1
项目2：300×2/1400=比例2
项目3：200×3/1400=比例3
计算收缩大小：
项目1：比例1×300
项目2：比例2×300
项目3：比例3×300

10、元素水平垂直居中

display:flex;
justify-content:center;
align-items:center；;