Html + Css 核心知识 - flex （超详细）

CSS的Flexbox布局模块提供了在一维轴上布置内容的灵活方式。Flexbox可以使容器内的子元素能够改变其尺寸以适应可用空间，并以最佳方式进行排列。

以下是Flexbox的一些核心概念：

flex-direction: 主轴方向，可以是row(水平，默认), row-reverse(水平反向), column(垂直), column-reverse(垂直反向)。
flex-wrap: 如果项目无法一次性放置在一条轴线上时是否换行，可以是nowrap(不换行，会压缩), wrap(换行), wrap-reverse(换行反向)。
flex-flow: 是flex-direction和flex-wrap的简写，默认为row nowrap。
justify-content: 主轴上的对齐方式，可以是flex-start(起始端对齐), flex-end(末尾端对齐), center(居中), space-between(两端对齐，空间间隔相等), space-around(每个项目两侧的空间相等), space-evenly(所有空间间隔相等)。
align-items: 交叉轴上的对齐方式，可以是stretch(默认值，如果项目未设置高度或设为auto，将占满整个容器高度), flex-start(交叉轴起点对齐), flex-end(交叉轴终点对齐), center(交叉轴中点对齐), baseline(项目第一行文字的基线对齐)。
align-content: 定义了多根轴线的对齐方式，如果只有一根轴线则不起作用，可以是stretch(默认值，轴线占满整个交叉轴), flex-start(轴线起点对齐), flex-end(轴线终点对齐), center(轴线中点对齐), space-between(轴线两端对齐，轴线间间隔相等), space-around(每条轴线两侧的空间相等), space-evenly(轴线间的空间相等)。

order: 定义项目的排列顺序，数值越小，排列越靠前，默认为0。
flex-grow: 定义项目的放大比例，默认为0，即如果存在剩余空间也不放大。
flex-shrink: 定义项目的缩小比例，默认为1，即如果空间不足将等比缩小。
flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size），默认值为auto，即项目本来大小。
flex: 是flex-grow, flex-shrink 和 flex-basis的简写，默认值0 1 auto。
align-self: 允许单个项目有与其他项目不一样的对齐方式，可以覆盖align-items属性，可以是auto(继承父元素), flex-start, flex-end, center, baseline, stretch。

HTML:




<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</