前言

弹性布局（Flex布局）是一种CSS布局技术，用于创建灵活的、自适应的网页布局。它通过使用display: flex属性将元素容器定义为弹性容器，使其内部的子元素成为弹性项目，从而实现灵活的布局方式。

基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

弹性布局容器属性

display: flex; 或 display: inline-flex; 声明容器

<!-- 声明一个块级弹性布局容器 -->
<div style="display: flex;">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

<!-- 声明一个内联级弹性布局容器 -->
<div style="display: inline-flex;">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

flex-direction 决定容器的方向 flex-direction: row | row-reverse | column | column-reverse; 默认值：row

row实例如下：

row-reverse实例如下：

column实例如下：

column-reverse实例如下：

flex-wrap 决定容器元素是否换行 flex-wrap: nowrap | wrap ｜ wrap-reverse; 默认值：nowrap

flex-flow 是 flex-direction 和 flex-wrap 的简写 flex-wrap: <'flex-direction'> || <'flex-wrap'> ; 默认值：row nowrap

justify-content 项目在主轴上的对齐方式 justify-content: flex-start | flex-end | center | space-between | space-around; 默认值：nowrap

align-items 项目在交叉轴上的对齐方式 align-items: stretch | flex-start | flex-end | center | baseline; 默认值：nowrap

align-content 设置了浏览器如何沿着弹性盒子布局的纵轴和网格布局的主轴在内容项之间和周围分配空间。 align-content: normal | start ｜ center ｜ end ｜ flex-start ｜ flex-end; 默认值：nowrap

gap 设置网格行与列之间的间隙 gap: <'row-gap'> 和 <'column-gap'> 的值;

弹性布局下子元素属性

order 设置容器下的元素出现顺序 order: <integer>;

flex 是flex-grow, flex-shrink 和 flex-basis的简写 flex: none | [ <flex-grow> <flex-shrink> || <flex-basis> ];

align-self 单独设置容器下的元素在交叉轴的对齐方式，可覆盖align-items属性 align-self: auto | stretch | flex-start | flex-end | center | baseline;

说明

flex兼容性。为了保证浏览器最大的兼容性问题：我们可以在这些属性前加上前缀：-webkit-,-moz-,-ms-。

弹性布局属性实现瀑布流