弹性盒/伸缩盒（flex）的使用

弹性盒（flex）

css中的一种布局手段，主要用来代替浮动来完成页面的布局，能够使得元素具有弹性，让元素跟随页面的大小改变而改变。

弹性容器：使用弹性盒必须将一个元素先设置为弹性容器

• display：flex，设为块级弹性容器
• display：inline-flex，设为行内弹性容器

弹性元素：弹性容器的子元素是弹性元素。

• flex-direction：弹性容器的排列方式
  – row：默认值，弹性元素水平从左向右排列
  – row-reverse：反向水平排列，从右向左排列
  – colum：弹性元素纵向从上向下排列
  – colum-reverse：弹性元素反向纵向自下向上排列

• flex-grow：弹性元素的伸展系数

• flex-shrink：弹性元素的收缩系数

• flex-wrap：弹性元素在弹性容器中自动换行
  – nowrap：默认值，不会换行
  – wrap：元素沿着辅轴方向自动换行
  – wrap-reverse：元素沿辅轴反方向自动换行

• justify-content：如何分配主轴上空白区间
  – flex-start：沿着主轴开始边排列
  – flex-end：沿着主轴终点边排列
  – center：元素居中排列
  – space-around：空白分布到元素两侧
  – space-evenly：空白分不到元素的单侧
  – space-between：空白均匀分不到元素之间

• align-item：元素在辅轴上的对齐方式
  – stretch：默认值，将元素的长度设置为相同的值
  – flex-start：元素不会拉伸，沿着辅轴起边对齐
  – flex-end：元素不会拉伸，沿着辅轴终边对齐
  – center：居中对齐
  – baseline：基线对齐

• align-content：辅轴空白部分的分布，可选值与justify-content相同

• flex-basis：元素在主轴上的基础长度。如果主轴是横向的，则指定的是宽度；若主轴是纵向的，则指定的是高度。