.flex對齊方式與交叉軸的方向有關，假設交叉軸從下到上。
align-items:
[ flex-start,
//起點/頂部對齊；
flex-end,
//終點/底部對齊；
center,
//中點/居中對齊；
baseline,
//專案的第一行文字的基線對齊；
stretch //預設值：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
]
對齊方式與軸的方向有關，本文中假設主軸從左到右。
justify-content:
[ start/flex-start,
//左對齊；
end/flex-end,
//右對齊；
center,
//居中；
space-between,
//兩端對齊，專案之間間隔相等；
space-around //每個專案兩側的間隔相等，即專案之間的間隔比專案與邊框的間隔大一倍。
]
flex-direction:
[ row,
//（預設）：主軸水平方向，起點在左端；
row-reverse,
//主軸水平方向，起點在右端；
column,
//主軸垂直方向，起點在上邊沿；
column-reverse //軸垂直方向，起點在下邊沿。
]
預設情況下，專案都排列在一條軸線上，但有可能一條軸線排不下。
flex-wrap:
[ nowrap,
//（預設）：不換行；
wrap,
//換行，第一行在上方；
wrap-reverse //換行，第一行在下方。
]
flex布局水平垂直居中
作為乙個來自逆戰班的前端 小學生 今天給大家講解下我對flex布局水平垂直居中的理解。首先，我們需要了解什麼是flex布局，flex布局通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。flex布局決定主軸方向上子項的對齊和分布方式的...
居中布局之水平垂直布局
命題 如下不定寬高的父元素與子元素 div class parent div class child demo div div 問題一 使子元素水平居中 方案1 child進行相容 parent 優點 瀏覽器相容性好 缺點 子元素會繼承文字居中特性，故如不希望子元素中文字居中，可對子元素設定 方案2...
預設布局換行 Flex布局教程
本篇為學習筆記。內容來自網路。布局的傳統解決方案，基於盒狀模型，依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。flexbox 是一種一維的布局，是因為乙個 flexbox 一次只能處理乙個維度上的元素布局，一行或者一列...