一擅腰、CSS3彈性盒子
彈性盒子是CSS3的一種新布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox）悲伶，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類(lèi)型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列陶夜、對(duì)齊和分配空白空間桃序。
二、瀏覽器支持
表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器的版本號(hào)溯职。
緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴精盅。
三、CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成谜酒。
彈性容器通過(guò)設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器叹俏。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
注意： 彈性容器外及彈性子元素內(nèi)是正常渲染的僻族。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局粘驰。
彈性子元素通常在彈性盒子內(nèi)一行顯示。默認(rèn)情況每個(gè)容器只有一行述么。
以下元素展示了彈性子元素在一行內(nèi)顯示蝌数，從左到右:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FLEX</title>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 1200px;
height: 640px;
background-color: lightsteelblue;
}
.flex-container .flex-item {
width: 320px;
height: 240px;
margin: 10px;
background-color:lightsalmon;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div>
</body>
</html>
四、CSS3 彈性盒子常用屬性
1. flex-direction 屬性
決定項(xiàng)目的方向度秘。
注意：如果元素不是彈性盒對(duì)象的元素顶伞，則 flex-direction 屬性不起作用。
.flex-container { flex-direction: row | row-reverse | column | column-reverse; }
2. flex-wrap 屬性
flex-wrap 屬性規(guī)定flex容器是單行或者多行，同時(shí)橫軸的方向決定了新行堆疊的方向唆貌。
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }
可以取三個(gè)值：
（1） nowrap (默認(rèn))：不換行滑潘。
（2）wrap：換行，第一行在上方锨咙。
（3）wrap-reverse：換行语卤，第一行在下方。
