css温故知新——弹性盒子

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要 适应不同的屏幕大小以及设备类型 时确保元素拥有恰当的行为的布局方式。

通过display:flex; 来指定盒子类型

弹性父元素属性

flex-direction
指定了弹性子元素在父容器中的位置。

flex-direction: row | row-reverse | column | column-reverse

juestify-content

设置弹性盒子在主轴方向上的对齐方式，即flex-direction指定的方向

justify-content: flex-start | flex-end | center | space-between | space-around

与侧轴方向上的对其既有相同，又有不同； 戏称为空隙问题
主轴方向为子元素排列方向，空隙需要大家共享
而align-items为侧轴方向，每个位置只有一个子元素，所以空袭牵涉到拉伸

align-items

设置弹性盒子元素在侧轴上的对齐方式

align-items: flex-start | flex-end | center | baseline | stretch

flex-wrap

作为flex布局的重要属性，语法如下：

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

align-content

align-content 属性用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐。
即： 当flex-wrap起作用发生换行时，该属性控制每行的对齐方式

当然，如果改变了flex-direction，则为列的对齐

---

弹性子元素属性

order

排序，用整数值来定义排列顺序，数值小的排在前面。可以为负值。

对齐 ???

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。所以设置垂直方向margin值为"auto"，可以使弹性子元素在弹性容器的两上轴方向都完全居中。

• 完美居中
• 一边边距固定，一边居中
• 居左/居右

align-self

align-self 属性用于设置 弹性（子）元素自身在侧轴（纵轴）方向上的对齐方式。

flex

flex 属性用于指定弹性子元素如何分配空间

flex: auto | initial | none | inherit |  [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]