背景
W3C在2009年提出了一種新的佈局方案：Flex 佈局。Flex佈局可以簡便、完整、響應式地實現各種頁面佈局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項屬性。
瀏覽器支持情況
但對於新手來講，盒模型或佈局基礎掌握不牢，會認為flex佈局屬性及其對應的取值太多，很難記住。為此小郭特意整理了一份前端最常用的flex佈局方式，直接使用，不需要測試所有屬性的作用。
廢話不多說，直接上乾貨。
常用佈局
默認：Flex 佈局默認就是首行左對齊
一、行內或列內佈局
- 行內居中對齊
<code>.box
{display
: flex;justify-content
: center;align-items
: center; }/<code>
- 行內兩端對齊
<code>.box
{display
: flex;justify-content
: space-between; }/<code>
- 行內與起始位置或結尾位置對齊
<code>.box
{display
: flex;justify-content
: flex-start; }/<code>
- 列內兩端對齊
<code>.box
{display
: flex;flex-direction
: column;justify-content
: space-between; }/<code>
- 行內均勻分佈
<code>.box
{display
: flex;justify-content
: space-around; }/<code>
二、超出折行
具體一行內含有多少元素，需要根據寬度設置來決定，超出部分換行
<code>.box
{display
: flex;flex-wrap
:wrap; }/<code>
附註：補充部分以上未提及的屬性及子項屬性
align-content：該屬性只作用於多行的情況下，用於多行的對齊方式
align-self：用來單獨指定某Flex子項的對齊方式
以上佈局方式足以滿足常見的佈局需求，想了解關於flex佈局更加詳細內容可以在下方留言或私信我
分享到:
