弹性盒与BFC

1.1 弹性盒

弹性盒子是css3新的布局模式

引入弹性盒布局模型的目的是提供一种更加有效的方式 来对一个容器的子元素进行排版、对齐和分配空间。

1.2 容器（父元素）上的属性

1. display : flex

让当前的盒子成为弹性盒子，子元素沿着主轴的方向进行排列，默认的主轴是x轴

子元素的特点 ：

类似于行内块元素（可以设置宽高，不设置宽高，由内容撑开）

子元素的float,clear,vertical-align属性将失效

2. flex-direction 设置主轴的方向

column：纵向排列。

row 默认在一行内排列

row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。

column-reverse：反转纵向排列，从下往上排，最后一项排在最上面

默认的主轴是x轴， 可以通过flex-direction 改变主轴为y轴

3. justify-content(主轴对齐方式)

center居中对齐

space-between两端对齐，中间自动分配

space-around自动分配距离

flex-start默认，顶端对齐

flex-end末端对齐

4. align-items（侧轴对齐方式）

center

stretch （默认值） ,子元素不设置高，默认align-items的值是stretch，等同于父元素的

高，所以我们要给子元素设置高

flex-start：侧轴的起点对齐

flex-end：侧轴的终点对齐

baseline：项目的第一行文字的基线对齐

5. flex-wrap 控制子元素折行

wrap： 折行

no-wrap ： 不折行（默认）

wrap-reverse

6. align-content （了解）： 侧轴对齐方式 ，好处，子元素折行，没有行间距 ，align-items会有

行间距

flex-start顶端没有行间距

flex-end底对齐没有行间距

center居中没有行间距

1.3 项目（子元素）上的属性

1. align-self ：控制自身在侧轴的对齐方式

Center 元素位于容器的中心。

Stretch 元素被拉伸以适应容器。 前提条件:不能给当前元素高

flex-start 元素位于容器的开头。

flex-end 元素位于容器的结尾。

2. flex :

第一种 ： 指的占比

第二种 ：指的剩余空间（实现三栏自适应）

2.1 BFC的概念

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有 Block-level BOX 参与，该区域拥有一

套

渲染规则来约束块级盒子的布局，且与区域外部无关。

2.2 生成BFC

1、根标签

2、float 的值不为 none

3、overflow 的值不为 visible

4、display 的值为 inline-block

5、position 的值为 absolute 或 fixed

2.3 BFC 的特性

1、内部的标签会在垂直方向上一个接一个的放置

2、垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻标签的 margin 会发生重叠

3、每个标签的左外边距与包含块的左边界相接触（从左向右），即使浮动标签也是如此。

4、BFC 的区域不会与 float 的标签区域重叠

5、计算 BFC 的高度时，浮动子标签也参与计算

6、BFC 就是页面上的一个隔离的独立容器，容器里面的子标签不会影响到外面标签，反之亦然

2.4 BFC解决的问题

1. 外边距塌陷（又叫外边距合并/外边距折叠） ： 利用特性6 （BFC 就是页面上的一个隔离的独立容器，

容器里面的子标签不会影响到外面标签，反之亦然）

2. 两栏三栏自适应 ： 利用特性4（BFC 的区域不会与 float 的标签区域重叠）

3. 父元素高度塌陷 ： 利用特性5（计算 BFC 的高度时，浮动子标签也参与计算）

4. 防止字体环绕 ： 利用特性4（BFC 的区域不会与 float 的标签区域重叠）