1.内容的多列多栏显示
<style>/* 初始化 */*{padding: 0;margin: 0;box-sizing: border-box;}:root{font-size: 20px;color:blue;}div{border: 1px solid black;padding: 20px;width: 50rem px;margin: 30px auto;}/* 分列显示 */div{column-count: 3;column-width: auto;column-rule-style: solid;column-rule-width: thin;column-rule-color: black;}</style></head><body><div>由军事科学院军事医学研究院与地方企业共同研发形成的新型冠状病毒mRNA疫苗（ARCoV），19日正式通过国家药品监督管理局临床试验批准。这是国内首个获批开展临床试验的新冠mRNA疫苗。新冠肺炎疫情暴发以来，军事科学院军事医学研究院紧前部署应急科研攻关，同时推进多条技术路线的新冠疫苗研发。国产新冠mRNA疫苗是该院继重组新冠疫苗（腺病毒载体）后，获批临床试验的又一高技术疫苗品种。据项目负责人、该院研究员秦成峰介绍，mRNA疫苗是近年来新兴的一种疫苗形式，其基本原理是通过特定的递送系统将表达抗原靶标的mRNA导入体内，在体内表达出蛋白并刺激机体产生特异性免疫学反应，从而使机体获得免疫保护。(来源:新华社)</div></body>
例图：
2.弹性盒模型（flexible box/flexboxflexible box/flexbox）
用于实现容器项目里的对齐、方向、排序，即使在项目大小的位置、动态生成的情况最大特性在于能够动态修改子元素的宽度和高度，以满足在不同尺寸下屏幕的恰当布局。
- 采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
- 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
4.容器属性及应用
- flex-direction 设置主轴方向，确定弹性子元素排列方式
| 属性值 | 含义 |
|---|---|
| row (默认值) | 主轴为水平方向。排列顺序与页面的文档顺序相同。如果文档顺序是ltr,则排列顺序是从左到右;如果文档顺序是rtl,则排列顺序是从右到左。 |
| row-reverse | 主轴为水平方向。排列顺序与页面的文档顺序相反。 |
| Column | 主轴为垂直方向。排列顺序为从上到下。 |
| column-reverse | 主轴为垂直方向。排列顺序为从下到上。 |
.container{flex-direction: row;
.container{flex-direction: row-reverse;}
.container{flex-direction: column;}
.container{flex-direction: column-reverse;}
- flex-wrap 当弹性子元素超出弹性容器范围时是否换行
| 属性值 | 含义 |
|---|---|
| nowrap (默认值 | 溢出时不换行 |
| Wrap | 溢出时自动换行 |
| wrap-reverse | 溢出时自动换行，翻转排列。 |
.container{flex-wrap: wrap;}
.container{flex-wrap: wrap-reverse;}
- flex flow flex- direction和flex- wrap属性的快捷方式，复合属性
.container{flex-flow: row;}
- justify-content 主轴上的对齐方式,项目之间
| 属性值 | 含义 |
|---|---|
| flex-start (默认值) | 主轴开始对齐，主轴为横轴，ltr环境下， 左对齐 |
| flex-end | 主轴结束对齐，主轴为横轴，ltr环境 下，右对齐 |
| Center | 居中对齐 |
| space-between | 第一个、最后一个对齐弹性容器的边缘，其余均匀分布。 |
| space-around | 全部均匀分布 |
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content:space-between;
justify-content:space-around;
justify-content:space-evenly;
- align-items 侧轴_上的对齐方式
| 属性值 | 含义 |
|---|---|
| flex-start | 侧轴开始对齐，主轴为横轴，顶对齐 |
| flex-end | 侧轴结束对齐 |
| Center | 居中对齐 |
| Baseline | 基线对齐 |
| stretch (默认值) | 从侧轴开始到侧轴结束铺满整个侧轴 |
align-items: stretch;
align-items: flex-start;
align-items: flex-end;
align-items: center;
- align-content 侧轴上有空白时，侧轴的对齐方式
| flex-start | 主轴开始对齐，主轴为横轴，ltr环境下，左对齐 |
| flex-end | 主轴结束对齐，主轴为横轴，ltr环境下，右对齐 |
| Center | 居中对齐 |
| space-between | 第一个、最后一个对齐弹性容器的边缘，其余均匀分布。 |
| space- around | 全部均匀分布 |
| stretch (默认值) | 各行伸展以占用剩余空间。如果剩余空间是负数，该值等效于flex-start |
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;
3.弹性子元素属性
Order <integer> 控制弹性容器里子元素的顺序,数值小的排在前面，可以为负值。
<style>.container {display: flex;}.container > .item:first-of-type {order: 3;}</style></head><body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div></body>
5.flex布局导航栏
<style>/* 初始化 */* {padding: 0;margin: 0;box-sizing: border-box;}a {text-decoration: none;color: silver;}nav {height: 50px;background-color: midnightblue;padding: 0 60px;/* 转为弹性盒布局 */display: flex;}nav a {height: inherit;line-height: 50px;padding: 0 20px;}nav a:hover {background-color: coral;color: white;}/* 登录/注册放在最右边 */nav a:last-of-type {margin-left: auto;}</style></head><body><header><nav><a href="">首页</a><a href="">视频课程</a><a href="">资料下载</a><a href="">课程介绍</a><a href="">论坛</a><a href="">登录/注册</a></nav></header></body>
6.总结
初次使用弹性盒模型觉得很神奇，相比之前利用浮动和定位实现布局，这种方法更加高效，兼容性也会很好。