Flexbox 是 CSS3 中的一種布局模式，它允許元素在一個容器中自動排列，可以使用靈活的方式創建復雜的布局，Flex 布局有很多優點，例如，它很容易實作回應式設計，并且可以很容易地對齊和排列元素，要使用 flex 布局，你需要將容器的 CSS display 屬性設定為 flex，然后可以使用 flex 屬性和簡單的 CSS 規則來控制子元素的排列，
<div style="display: flex;">
<div style="flex: 1;">Item 1</div>
<div style="flex: 1;">Item 2</div>
<div style="flex: 1;">Item 3</div>
</div>這段代碼將會使得三個div寬度相等并且在一行上，
關于 flex 布局，還有很多有用的屬性和簡單的 CSS 規則可以用來控制子元素的排列，這些屬性包括:
flex-direction: 確定主軸的方向，默認為水平（row）justify-content: 確定元素在主軸上的對齊方式align-items: 確定元素在交叉軸上的對齊方式align-content: 確定多根軸線的對齊方式（當有多根軸線時才有效）flex-wrap: 確定如何在多行/列中排列元素
Flex 布局還有很多其他屬性，但是這些是最常用的，可以簡單的理解上面的這些屬性， 每個子元素上還有一些屬性可以單獨控制，例如：
flex-grow: 定義元素的放大比例flex-shrink: 定義元素的縮小比例flex-basis: 定義元素在分配多余空間之前的主軸大小
除了屬性，還有一些實用的 CSS 類可用于更快地創建常見的 flex 布局，比如，如果你想讓一個容器中的元素水平居中，可以使用這個 class：
.container {
display: flex;
justify-content: center;
}如果想要縱向居中的話，可以用align-items
.container {
display: flex;
align-items: center;
}這兩個類可以結合使用，使子元素在容器內居中
.container {
display: flex;
align-items: center;
justify-content: center;
}還可以使用 flex-wrap 屬性，可以讓容器的子元素自動換行，并且讓容器能夠更好地適應不同的螢屏大小，
.container {
display: flex;
flex-wrap: wrap;
}Flex 布局是一種很好的布局方式，適用于很多種場景，結合上述的屬性和類可以很方便的實作布局，
還有幾個需要注意的地方可以幫助你在實際使用中更好地理解和使用 flex 布局:
-
Flexbox 是單向布局，它只能沿著一個主軸（row 或 column）排列元素，如果需要多個方向的布局，則需要使用多個 flex 容器，
-
Flex 布局最常見的應用是在一維空間上排列元素，比如在水平或垂直方向上排列一組按鈕，
-
雖然 flex 布局很容易實作回應式設計，但是需要注意在不同螢屏大小下的布局效果，通常需要使用 media query 來調整布局，
-
在使用 flex 布局時，需要注意兼容性問題，Flexbox 是在 CSS3 中引入的，因此在舊版瀏覽器上可能不支持，
-
Flex 布局最適用于在移動設備上使用，因為它很容易實作回應式設計，如果你在移動端開發時，Flex 布局是非常適合的布局方式，
還有一些其他細節和技巧可以讓您在使用 flex 布局時更高效，更靈活地實作布局，
-
使用 flex shorthand 屬性，可以同時設定 flex-grow, flex-shrink 和 flex-basis，這可以讓你的 CSS 更簡潔，更易于維護，
-
使用 auto margins, 你可以讓元素在主軸上自動居中對齊，
.item {
margin: auto;
}-
使用
align-self屬性來單獨設定某個元素在交叉軸上的對齊方式，覆寫父容器上的 align-items 屬性， -
盡量使用 min-width/max-width 代替 width 屬性，這樣可以讓元素在父容器的大小變化時更好地適應，
-
使用 order 屬性來控制元素的排列順序，
-
結合 Flex 布局和 Grid 布局可以實作更為復雜的布局，Flex 布局是用于實作一維布局的，而 Grid 布局則適用于二維布局，
另外還有可能要使用的 CSS 偽類:
:first-child,:last-child: 可以讓您指定第一個或最后一個 flex 元素的樣式，:nth-child(n): 可以讓您指定第 n 個 flex 元素的樣式，
作者：yuzhihui
出處：http://www.cnblogs.com/yuzhihui/ 宣告：歡迎任何形式的轉載，但請務必注明出處！！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541769.html
標籤：其他
上一篇：記錄--前端性能監控初步實戰
下一篇：Vue.js 回應式原理