弹性盒对象flex

弹性盒对象——游戏方式学习flex

• Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
• 

jc —— x轴方向控制元素居左、居右、居中、等间。
ai —— y轴方向控制元素居上、居下、居中。
fd —— 让元素在x、y轴 desc/asc 排序 

• 弹性盒子是一种CSS3中新增的布局模式，它的设计灵感来源于传统的木工和建筑行业。弹性盒子的目的就是让网页元素像这些木块一样灵活排列。
  在传统的网页布局中，我们通常使用margin和padding来控制元素的位置和间距。但在弹性盒子布局中，我们使用一种叫做“轴”的东西来控制元素的位置和方向。

• 学习重点包括弹性容器（Flex container）和弹性子元素（Flex item）。 这些属性包括flex-direction（定义主轴的方向）、justify-content（设置弹性子元素在主轴上的对齐方式）、align-items（设置弹性子元素在交叉轴上的对齐方式）等。在弹性盒子布局中，轴起到了非常重要的作用。

• Space-between和space-around 控制元素之间间距的属性，space-between将元素之间的空间平均分配(首尾元素靠近两边)，而space-around则将空间平均分配给每个子项目，使得元素之间的间距相等，但首尾元素的间距与元素之间的间距相等。

• justify-content:元素水平方向对齐

flex-start: 元素和容器的左端对齐。
flex-end: 元素和容器的右端对齐。
center: 元素在容器里居中。
space-between:元素之间保持相等的距离。
space-around:元素周围保持相等的距离。

• align-items：垂直方向对齐

flex-start：元素与容器顶部对齐。
flex-end：元素与容器底部对齐。
center：元素在容器的垂直居中。
baseline：元素在容器的基线位置显示。
stretch：元素被拉伸以填满整个容器。

• flex-direction：元素倒叙或顺序排列。

row：元素摆放的方向和文字方向一致。（asc排序）。
row-reverse：元素摆放的方向和文字方向相反（desc排序）。
column：元素行变列，从上到下放置（asc排序）。
column-reverse：元素行变列，从下到上放置（desc排序）。 

• order

.red{
order :1;//或-2，往前移动2个元素。+1则往后面移动一个元素
}