弹性盒与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 的标签区域重叠）