一、flex布局

flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。
任何一個容器都可以指定為 flex 布局。

采用 flex 布局的元素，稱為 flex 容器（flex container），簡稱"容器"。

.container {
	display: flex;
}

二、flex-direction 主軸與交叉軸

flex-direction 屬性決定主軸的方向（也就是元素的排列方向），與主軸垂直的軸是交叉軸。

flex-direction 有4個屬性值可以設(shè)置

• row（默認值）：主軸為水平方向，起點在左端。
• row-reverse：主軸為水平方向，起點在右端。
• column：主軸為垂直方向，起點在上沿。
• column-reverse：主軸為垂直方向，起點在下沿。
  
• justify-content 屬性定義了項目在主軸上的對齊方式。
• align-items 屬性定義項目在交叉軸上的對齊方式。

三、flex-wrap 定義元素超出則換行

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

它可能取三個值：

• nowrap（默認）：不換行。
• wrap：換行，第一行在上方。（常用此項）
• wrap-reverse：換行，第一行在下方。

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
常用：flex-flow: row wrap; // 主軸水平向右，并且元素自動換行

四、justify-content 主軸上的對齊方式

justify-content屬性定義了元素在主軸上的對齊方式。

它可能取六個值：具體對齊方式與軸的方向有關(guān)。下面假設(shè)主軸為從左到右。

• stretch：自動拉伸子元素，直到鋪滿父容器為止
• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 元素居中對齊
• space-between：兩端貼邊對齊，元素之間的間隔都相等。
• space-around：每個元素兩側(cè)的間隔相等。所以，元素之間的間隔比 元素與邊框 的間隔大一倍。
• space-evenly: 完全等距均勻分布，元素之間、元素與邊框之間間隔均相等。

五、align-items 交叉軸上的對齊方式

align-items屬性定義了元素在交叉軸上的對齊方式。
它可能取5個值。具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下。

• stretch（默認值）：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度。
• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。

六、align-content

1、align-content可以看成是和justify-content是相似且對立的屬性，是指垂直方向每一行 flex子項的對齊和分布方式。

2、只適用于多行的flex容器，并且當交叉軸上有多余空間使flex容器內(nèi)的flex線對齊。
容器內(nèi)必須有多行的項目，該屬性才能渲染出效果。
菜鳥教程在線測試align-content

七、例子

居中布局

使用了flex布局的盒子模型設(shè)置垂直居中就非常簡單了，只需要設(shè)置 align-items:center; 屬性。

.wrap {
  width: 300px;
  height: 300px;
  border: 1px solid red;
  display:flex;
  justify-content:center;
  align-items:center;
}

.box {
  height: 100px;
  width: 100px;
  border: 1px solid blue;
}

兩欄布局

.wrap { display: flex; }
.left { width: 200px; }
.right { flex: 1; }

flex:1的含義

flex:1 : 表示的含義是等分剩余空間(即：flex:1 1 0%;)，讓所有彈性盒模型對象的子元素都有相同的寬度，且忽略它們內(nèi)部的內(nèi)容。

flex 屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。默認值為 0 1 auto。后兩個屬性可選。

• flex-grow 屬性定義項目的放大比例，默認為0，即如果存在剩余空間也不放大。如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據(jù)的剩余空間將比其他項多一倍。

• flex-shrink 屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

• flex-basis 屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間，即伸縮的基準值。瀏覽器根據(jù)這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

flex 屬性屬性有兩個快捷值：

• auto (1 1 auto) ：自動放大與縮小
• none (0 0 auto)：不自動放大與縮小

建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關(guān)值。

文章來源地址http://www.zghlxwxcb.cn/news/detail-776018.html

到了這里，關(guān)于【CSS】flex布局用法解析，快速上手flex布局，flex:1是什么意思？肯定看的懂好吧？的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！