最近写企业家用到许多弹性，感觉到弹性的重要性，今天给大家总结一下
弹性布局（Flexbox）是一种在 CSS 中用来实现灵活的布局方式，它能够方便地调整容器中子元素的尺寸、顺序和对齐方式。以下是一些常见的弹性布局属性及其效果：
- display: flex;
- 这是定义容器采用弹性布局的基础属性。
- 容器内的子元素会自动成为弹性项目。
- flex-direction: row | row-reverse | column | column-reverse;
- 定义弹性容器中弹性项目的排列方向。
row: 水平方向从左到右排列（默认值）。row-reverse: 水平方向从右到左排列。column: 垂直方向从上到下排列。column-reverse: 垂直方向从下到上排列。
- justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
- 定义弹性项目在主轴上的对齐方式。
flex-start: 从主轴起点对齐（默认值）。flex-end: 从主轴终点对齐。center: 在主轴上居中对齐。space-between: 在弹性项目之间均匀分布空白间距。space-around: 在弹性项目周围均匀分布空白间距。space-evenly: 在弹性项目周围和之间均匀分布空白间距。
- align-items: flex-start | flex-end | center | baseline | stretch;
- 定义弹性项目在交叉轴上的对齐方式。
flex-start: 从交叉轴起点对齐。flex-end: 从交叉轴终点对齐。center: 在交叉轴上居中对齐。baseline: 按照第一行文字的基线对齐。stretch: 默认值，弹性项目被拉伸以适应容器的大小。
- flex-grow: number;
- 定义弹性项目的放大比例，默认为 0，不放大。
- 数值越大，相对于其他弹性项目，该项目在剩余空间中所占比例越大。
- flex-shrink: number;
- 定义弹性项目的缩小比例，默认为 1，即可以缩小。
- 数值越大，相对于其他弹性项目，该项目在空间不足时所缩小的程度越大。
- flex-basis: length | auto;
- 定义弹性项目在分配多余空间之前的初始尺寸。
- 默认值为
auto，根据项目内容自动分配大小。
这些是 Flexbox 中一些常见的属性，它们可以灵活地控制弹性容器和其中的弹性项目的布局和排列方式，从而实现各种各样的布局效果。
我是小辉，请大家多多关照
