Flex 是 CSS3 推出的一種布局方式，到現在為止已經有超過十年時間了，所有現代瀏覽器都已經支持了，詳細參考CanIUse
給一個元素的 display 屬性設定為 flex 就可以給這個元素開啟 Flex 布局，其內部的子元素將會受到影響
.box {
display: flex;
}
給這個容器內添加幾個元素就可以看到效果
<div class="box">
<div class="item-1">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
</div>
可以看到的是默認情況下應該獨占一行的 <div> 元素現在全部擠在了一行，這就是 flex 的效果，display 的值除了 flex 還有一個 inline-flex，兩者的區別就像 block 和 inline-block 類似
flex-direction
在平面上布局有 4 個方向，由 flex-direction 屬性指定
.box {
flex-direction: row | column | row-reverse | column-reverse;
}
一旦布局方向確定后，則該方向將成為 flex 的主軸，和主軸垂直的一個方向稱為交叉軸，圖中箭頭是用來表示主軸方向的
flex-direction: row
flex-direction: column
flex-direction: row-reverse
flex-direction: column-reverse
justify-content
元素在軸線上有 3 種普通對齊方式，其中 justify-content 屬性定義元素在主軸上的位置，align-items 和 align-content 屬性定義元素在交叉軸上的位置，值分別有起點，居中和終點
.box {
align-content: flex-start | flex-end | center;
align-items: flex-start | center | flex-end;
justify-content: flex-start | center | flex-end;
}
align-items: flex-start|center|flex-end
align-content: flex-start|flex-end|center
還有 3 種在軸線上均勻分布的方式，由 justify-content 定義在主軸上的分布方式，align-content 定義在交叉軸上的分布方式
.box {
align-content: space-between | space-evenly | space-around;
justify-content: space-between | space-evenly | space-around;
}
align-content: space-between|space-evenly|space-around
align-items
不同于主軸，元素在交叉軸上默認是拉伸的
.box {
align-items: stretch;
}
align-items: stretch
另外還有一個特殊對齊方式是 baseline，這是根據文字的基線對齊，改變每一項文字的大小可以看出效果
align-items: baseline
flex-wrap
當容器無法容納所有元素的時候，可以通過 flex-wrap 屬性設定是否折疊
.box {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-wrap: wrap
flex-wrap: wrap-reverse
需要注意的是 wrap-reverse 值會改變交叉軸的方向，下面例子可以說明這一點
align-items: flex-start; flex-wrap: wrap-reverse
前面的屬性都是設定在容器上的，接下來的屬性都是設定到容器中的元素上的
order
order 可以改變元素的順序，默認值為 0，按從小到大順著主軸排列
.item-2 {
order: -1;
}
align-self
單獨改變一個元素在交叉軸上的對齊方式，值和 align-items 一致
.item-2 {
align-self: flex-start | center | flex-end;
}
align-self: flex-end
能不能在主軸上單獨改變一個元素的對齊方式呢，比如有沒有一個 justify-self 屬性，瀏覽器中有是有，但是好像沒什么用，
flex
flex 是一個組合屬性，由 flex-grow，flex-shrink 和 flex-basis 組成
.item {
flex: flex-grow | flex-shrink | flex-basis;
}
flex-grow 屬性規定分配容器剩余空間的比例，數值越大就越多
.item-1 {
flex: 2;
}
.item-2 {
flex: 1;
}
.item-3 {
flex: 3;
}
全部設定為 1 這樣所有元素就會平分容器的空間
.item {
flex: 1;
}
默認值是 0，不占用剩余空間
flex-shrink 屬性規定當元素空間不足以容納這所有元素的時候，每個元素應該如何縮小來騰出足夠的空間，數值越大需要縮小越多
.item {
flex: 0 1;
}
默認值是 1
flex-basis 規定這個元素在主軸上占據的空間，默認值是 auto，表示元素占據的空間由其自身決定，其值可以是各種長度單位
.item {
flex: 0 1 60px;
}
將 flex 屬性分開寫就像這樣
.item {
flex-grow: 0;
flex-shrink: 1;
flex-basis: 60px;
}
實際應用
Flex 可以更方便地使用柵格布局以及回應式布局，比如可以在螢屏寬的時候按行布局，螢屏窄的時候按列布局，只需要簡單修改一下 flex-direction 屬性即可
垂直居中
萬惡的垂直居中在 CSS 的世界里實際實作并不像說出來那么簡單，不過那都成為過去了，有了 Flex 之后，這個需求將變得非常容易
.box {
display: flex;
}
.item {
align-self: center;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/47741.html
標籤：Html/Css
上一篇：7.使用定位制作輪播圖樣式
下一篇：8.使用背景圖，制作雪碧圖效果