# CSS

# `flex`布局

用flex布局实现垂直水平居中：

{
    display: flex;
    justify-content: center;
    align-items: center
}

1
2
3
4
5

flex的核心的概念就是容器和轴。容器包括外层的父容器和内层的子容器，轴包括主轴和交叉轴。flex 布局涉及到 12 个 CSS 属性（不含 display: flex）。

# 容器

容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

# 父容器

.parent{
    display: flex;
    /*
    * justify-content用于定义如何沿着主轴方向排列子容器
    * 可选值：
    * flex-start：起始端对齐
    * flex-end：末尾段对齐
    * center：居中对齐
    * space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半
    * space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切
    */
    justify-content: flex-start; 
    /*
    * align-items用于定义如何沿着交叉轴方向分配子容器的间距
    * 可选值：
    * flex-start：起始端对齐
    * flex-end：末尾段对齐
    * center：居中对齐
    * baseline：基线对齐，这里的baseline默认是指首行文字，即first baseline，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线
    * stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。
    */
    align-items: flex-start;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 子容器

.children{
    /*设置为flex之后，将自动填充剩余空间，伸缩比例由 flex 属性确定*/
    display: flex;
    /*
    * flex的值可以是无单位数字（如：1, 2, 3），也可是有单位数字（如：15px，30px，60px），或 none 关键字。
    * flex 是多个属性的缩写，允许 1 - 3 个值连用
    */
    flex: 1;
    /*
    * 单独设置子容器如何沿交叉轴排列
    * 可选值与父容器align-items相同
    */
    align-self：flex-start;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 轴

轴包括主轴和交叉轴，justify-content属性决定子容器沿主轴的排列方式，align-items属性决定子容器沿着交叉轴的排列方式。flex-direction属性决定主轴的方向，交叉轴的方向由主轴确定。

.parent{
    display: flex;
    justify-content: flex-start; 
    align-items: flex-start;
    /*
    * 可选值：
    * row：向右
    * column：向下
    * row-reverse：向左
    * column-reverse: 向上
    */
    flex-direction: row;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 进阶概念

# 父容器

.parent{
    display: flex;
    justify-content: flex-start; 
    align-items: flex-start;
    flex-direction: row;
    /*
    * 设置换行方式，决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行。
    * 可选值：
    * nowrap：不换行
    * wrap：换行
    * wrap-reverse：逆序换行
    */
    flex-wrap: nowrap;
    /*
    * 多行沿交叉轴对齐,当子容器多行排列时，设置行与行之间的对齐方式。
    */
    align-content：flex-start;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

轴向与换行组合设置：flex-flow

# 子容器

设置基准大小：flex-basis

设置扩展比例：flex-grow

设置收缩比例：flex-shrink

设置排列顺序：order

# BFC

文档流分为定位流、浮动流和普通流三种。

FC是formatting context的首字母缩写，即格式化上下文，是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局以及和其他元素之间的关系和作用。

常见的FC有BFC、IFC（行级格式化上下文），还有GFC（网格布局格式化上下文）和FFC（自适应格式化上下文）

BFC(Block formatting context)是块级格式化上下文，是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC可以简单的理解为某个元素的一个CSS属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。

# 触发条件：

根元素，即HTML元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

# BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠，所以要解决margin会发生重叠的问题就要把它用不同的BFC分隔开
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

# BFC有哪些作用：

自适应两栏布局
可以阻止元素被浮动元素覆盖
可以包含浮动元素——清除内部浮动
分属于不同的BFC时可以阻止margin重叠

# CSS

# flex布局

# 容器

# 父容器

# 子容器

# 轴

# 进阶概念

# 父容器

# 子容器

# BFC

# 触发条件：

# BFC布局规则：

# BFC有哪些作用：

# 移动端1px问题

# `flex`布局