一、使用须知
- 本文整理自网上的一个flex属性练习小游戏；
- 除 order 和 align-self 属性是写在子元素上的，其他都是写在容器元素上的；
- 容器元素必须有 display: flex; 属性；
二、flex大法好
- justify-content（横向对齐）
- flex-start：元素与容器的左端对齐；
- flex-end：元素与容器的右端对齐；
- center：元素在容器里横向居中；
- space-between：元素之间保持相等距离；
- space-around：元素周围保持相同距离；
- align-items（纵向对齐）
- flex-start：元素与容器顶部对齐；
- flex-end：元素与容器底部对齐；
- center：元素纵向居中；
- baseline：元素在容器基线位置显示；
- stretch：元素被拉伸以及填充整个容器；
- align-self（用在子元素上，取值与 align-items 一样，覆盖 align-items 的属性）
- order（用在子元素中，调整单个元素的位置）
- 默认值为0；
- flex-direction（排列方向）
- row：与文字方向一致；
- row-reverse：与文字方向相反；
- column：元素从上到下排列；
- column-reverse：迅速从下到上排列；
- flex-wrap（是否换行）
- nowrap：所有元素都在一行；
- wrap：元素自动换行；
- wrap-reverse：逆序多行，以右下角为起点；
- flex-flow（flex-direction 与 flex-wrap 的缩写属性）
- 例：flex-flow:row wrap;
- align-content（纵向多行对齐，可以用来决定行间距）
- flex-start：多行集中在顶部；
- flex-end：多行集中在底部；
- center：多行居中；
- space-between：行与行之间保持相等距离；
- space-around：每行周围保持相等距离；
- stretch：每行被拉伸已填满整个容器；
