display: flex 布局終極大法

一、使用須知

1、本文整理自網上的一個flex屬性練習小遊戲；

2、除 order 和 align-self 屬性是寫在子元素上的，其他都是寫在容器元素上的；

3、容器元素必須有 display: flex; 屬性；

二、flex大法好

1.justify-content（橫向對齊）

• flex-start：元素與容器的左端對齊；
• flex-end：元素與容器的右端對齊；
• center：元素在容器裡橫向居中；
• space-between：元素之間保持相等距離；
• space-around：元素周圍保持相同距離；

2.align-items（縱向對齊）

• flex-start：元素與容器頂部對齊；
• flex-end：元素與容器底部對齊；
• center：元素縱向居中；
• baseline：元素在容器基線位置顯示；
• stretch：元素被拉伸以及填充整個容器；

3.align-self（用在子元素上，取值與 align-items 一樣，覆寫 align-items 的屬性）

4.order（用在子元素中，調整單個元素的位置）

• 預設值為0；

5.flex-direction（排列方向）

• row：與文字方向一緻；
• row-reverse：與文字方向相反；
• column：元素從上到下排列；
• column-reverse：迅速從下到上排列；

6.flex-wrap（是否換行）

• nowrap：所有元素都在一行；
• wrap：元素自動換行；
• wrap-reverse：逆序多行，以右下角為起點；

7.flex-flow（flex-direction 與 flex-wrap 的縮寫屬性）

• 例：flex-flow:row wrap;

8.align-content（縱向多行對齊，可以用來決定行間距）

• flex-start：多行集中在頂部；
• flex-end：多行集中在底部；
• center：多行居中；
• space-between：行與行之間保持相等距離；
• space-around：每行周圍保持相等距離；
• stretch：每行被拉伸已填滿整個容器；