CSS3的flex弹性盒子学习笔记

╰+哭是因爲堅強的太久メ 2021-09-20 05:42 351阅读 0赞

## 基本概念 ##

*  采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
 *  容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的方向默认为水平方向，可以通过flex-direction设置主轴方向。

## 相关属性 ##

### 父元素 ###

### 子元素 ###

*  order：默认值为0
 *  align-self：auto | flex-start | flex-end | center | baseline | stretch 定义flex子项单独在交叉轴方向上的对齐方式（权重大于align-items，小于align-content）。
 *  flex-grow:设置或检索弹性盒的扩展比率。0（default）
 *  flex-shrink:设置或检索弹性盒的收缩比率. 1( default) 压缩公式
 *  flex-basis：auto(default)
 *  flex：以上三个的复合属性

### 深入讲解flex复合属性 ###

#### flex-shrink ####

*  加权值：200 \* 1+200 \* 1+400 \* 3=1600
 *  a =b=200 \* 1 / 1600 \* 200 = 25
 *  c = 400 \* 3 / 1600 \*200 =150
 *  参与加权值计算的是真实内容区的宽度

#### flex-basis ####

#### 企业开发经验 ####

1.  flex-grow的默认值是0，设置为1时会根据在父元素中所占的大小和它的子元素的大小被拉伸。如果width不想受到它的子元素的影响，可以将自身的 **width** 设置为任意值或者设置 **overflow: hidden; （ 防止子元素将自己撑开）**

*  当设置宽的时候，如果basis有值且小于width,那么元素真实的宽的范围在basis<realWidth<width
 *  当只设置basis，元素真实的宽min-width=basis
 *  无论什么情况，被不换行的内容撑开的容器，不参与压缩计算

#### flex应用 ####

1.  居中
2.  可动态增加的导航栏
3.  等分布局（4等分，2等分，中间可加margin）
4.  其中一个固定宽度的布局（固定一个，固定两个…）
5.  圣杯布局
6.  流式布局

因为仅仅是自己的学习笔记，所以并不是很详细，详细可参考官方教程

## 其它CSS小技巧 ##

1.  img标签设置伪元素不会生效
2.  img在div中有空隙的解决方案：父级设置font-size:0; or img 设置 vertical-align: bottom;