大家好，我是
梅巴哥er
。本篇專門複習一下Flex布局的相關知識。
參考學習網站：
- 菜鳥教程：Flex布局
- 阮一峰老師的總結：Flex布局
什麼是Flex布局
- flex布局，也就是彈性布局，是W3C在2009年提出的一種新的布局形式。
Flex布局的特點
- 靈活度高
- 布局簡單
- 彈性盒子
為啥要用Flex布局
- 傳統的布局方式，是通過 display + position + float來完成的。這種形式在某些特殊布局中不是很方面，比如垂直居中。
- flex布局具有很高的靈活性，完成這種布局，就非常友善。
怎麼用Flex布局
- 任何一個盒子都可以指定位flex布局。
- 塊級盒子：
.box { display: flex; }
- 行内元素：
.box { display: inline-flex;}
- 注意，盒子設為flex布局後，子元素的float, clear和vertical-aline就失效了。
- 設定位flex布局的盒子，就叫容器。 容器内的子元素，都叫項目(item)。
- 容器有兩根軸線，左向右的橫軸和上至下的豎軸。 項目預設沿着橫軸排列。
來一起複習一下Flex布局吧！
Flex布局的屬性
容器的6大屬性，這些都是寫在容器上的
- 1，
flex-direction
- row: → （預設）
- row-reverse: ←
- column: ↓
- column-reverse: ↑
- 2，
flex-wrap
- nowrap: 不換行（預設）。 這樣會壓縮項目的尺寸，強行讓項目都排在一行。
- wrap: 換行。第一行排不下，就會排去下面一行。
- wrap-reverse: 換行。但是項目先排容器的最下面，下面排滿了，再往上面一行排。
- 3，
flex-flow
- 例如： flex-flow: row nowrap;
- 4，justify-content：表示項目在橫軸上的對齊方式。5個值。
- flex-start：左對齊
- flex-end: 右對齊
- center: 居中
- space-between:左右兩端對齊，項目之間的間隔都相等
- space-around: 每個項目兩側的間隔相等。
- 5，
align-items
- flex-start: 上對齊
- flex-end: 下對齊
- center: 居中（垂直方向的居中）
- baseline: 項目的第一行文字的基線對齊
- stretch: 預設值。項目被拉伸。如果項目不設定高度，則在高度上頂滿容器。
- 6，
align-content
- flex-start
- flex-end
- center
- space-between
- space-around
- stretch（預設值）
項目的6個屬性。這些屬性是寫在item上的
- 1，
order
- 2,
flex-grow
- 如果所有項目的flex-grow屬性都為1，則它們将等分剩餘空間（如果有的話）。
- 如果一個項 目的flex-grow屬性為2，其他項目都為1，則前者占據的剩餘空間将比其他項多一倍。
- 3,
flex-shrink
- 如果所有項目的flex-shrink屬性都為1，當空間不足時，都将等比例縮小。
- 如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
- 4,
flex-basis
- 值是數字或px長度或auto
- 5,
flex
- 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
- 6,
align-self
- 預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
- flex-start
- flex-end
- center
- baseline
- stretch
測試一下：垂直居中是否簡單了？
完整代碼：子盒子及子盒子裡的内容都居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.box {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid pink;
}
.box1 {
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: purple;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">hello</div>
</div>
</body>
</html>