弹性盒子（Flexbox）模型——入门教程

在学习时需注意，弹性盒子本质上也用的是div，两者区别在于后者将div的display变为了flex。出现这种盒子模型是为了使一套页面可以同时兼容台式机和移动终端，在不同的屏幕尺寸和像素的情况下可预测地显示出来。

一、基本概念

1. 容器（flex container）

是一个块级标签，可包含其他的标签（元素），通常情况下是一个div。

2. 项目（flex item）

又称为一个子项。包含在容器里的元素都可以称为子项目。

3. 排列方向

也叫布局方向。具体指元素的布局方向。

二、容器属性

1. 元素布局方式 flex-direction

容器内元素的布局方式，也可以说排列方式。

2.元素换行情况 flex-wrap

flex-wrap 属性规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。

3.子项的对齐方式 justify-content

用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。

以下为一些对齐方式的列举：

/* 对齐方式 */
justify-content: center;     /* 居中排列 */
justify-content: start;      /* 从行首开始排列 */
justify-content: end;        /* 从行尾开始排列 */
justify-content: flex-start; /* 从行首起始位置开始排列 */
justify-content: flex-end;   /* 从行尾位置开始排列 */
justify-content: left;       /* 一个挨一个在对齐容器得左边缘 */
justify-content: right;      /* 元素以容器右边缘为基准，一个挨着一个对齐, */

/* 基线对齐 */
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/* 分配弹性元素方式 */
justify-content: space-between;  /* 均匀排列每个元素
                                   首个元素放置于起点，末尾元素放置于终点 */
justify-content: space-around;  /* 均匀排列每个元素
                                   每个元素周围分配相同的空间 */
justify-content: space-evenly;  /* 均匀排列每个元素
                                   每个元素之间的间隔相等 */
justify-content: stretch;       /* 均匀排列每个元素
                                   'auto'-sized 的元素会被拉伸以适应容器的大小 */

/* 溢出对齐方式 */
justify-content: safe center;
justify-content: unsafe center;

/* 全局值 */
justify-content: inherit;
justify-content: initial;
justify-content: unset;

4.单根轴线的对齐方式 align-item

设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

align-items: flex-start | flex-end | center | baseline | stretch

值（value）:

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。

flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。

center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。

baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

5.多根轴线的对齐方式 align-self

align-self 属性定义flex子项单独在侧轴（纵