css3在佈局方面做了非常大的改進，使的我們對塊級元素的佈局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。
主軸：Flex容器的主軸主要用來配置Flex項目，默認是水平方向
側軸：與主軸垂直的軸稱作側軸，默認是垂直方向
方向：默認主軸從左向右，側軸默認從上到下
主軸和側軸並不是固定不變的，通過flex-direction可以互換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 80%; /* 用百分比可以縮放 */
height: 200px;
border: 1px solid skyblue;
margin: 100px auto;
/* 給父級盒子添加flex屬性 */
display: flex; /* 伸縮佈局模式 */
}
section div {
/* width: 33.33%; */
height: 100%;
/* flex: 1; */ /* 子盒子添加份數 不跟單位 每個人 各佔一等分*/
/* float: left; */
/* margin:0 5px; 容易出問題 */
}
section div:nth-child(1) {
background-color: skyblue;
flex: 1;
}
section div:nth-child(2) {
background-color: purple;
margin: 0 5px;
flex: 2;
}
section div:nth-child(3) {
background-color: gray;
flex: 1;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>3</div>
</section>
</body>
</html>
1.flex子項目在主軸的縮放比例，不指定flex屬性，則不參與伸縮分配
min-width 最小值 min-width: 280px; 盒子最小寬度不能小於280
max-width 最大值 min-width:1280px; 最大寬度不能大於1280
2.flex-direction調整主軸方向（默認爲水平方向）
（flex-direction: column; 垂直排列 column-reverse 翻轉 顛倒 從下向上）
（flex-direction: row; 水平排列 row-reverse 對齊方式與row相反 從右到左）
justify-content調整主軸對齊（水平對齊）
| 值 | 描述 | 白話文 |
| flex-start | 默認值，項目位於容器的開頭，讓子元素從父容器的開頭排序 | 讓子元素從父容器的開頭開始排序 |
| flex-end | 項目位於容器的結尾 | 讓子元素從父容器的後面開始排序 |
| center | 項目位於容器的中心 | 讓子元素位於父容器中間顯示 |
| space-between | 項目位於各行之間留有空白的容器內 | 左右的盒子貼近父盒子，中間的平均分佈空白間距 |
| space-around | 項目位於各行之前、之間、之後都留有空白的容器內 | 相當於給每個盒子添加了左右margin外邊距 |
4.align-items調整側軸對齊
5.flex-wrap控制是否換行
6.align-content堆棧（由flex-wrap產生的獨立行）對齊
7.flex-flow啊flex-direction、flex-wrap的簡寫形式
8.order控制子項目的排列順序，正序方式排列，從小到大
需找出主軸、側軸、方向、各屬性對應的屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 1000px;
height: 300px;
border: 2px solid skyblue;
margin: 100px auto;
display: flex;
/* justify-content: flex-start; */ /* 讓子元素從父容器的開頭排序 */
/* justify-content: flex-end; 讓子元素從父容器的後面開始排序 但是盒子的順序不變 */
/* justify-content: center; 讓子元素位於父容器中間顯示 */
/* justify-content: space-between; 左右的盒子貼近父盒子，中間的平均分佈空白間距 */
justify-content: space-around; /* 相當於給每個盒子添加了左右margin外邊距 */
}
div {
width: 250px;
height: 100%;
}
div:first-child {
background-color: skyblue;
}
div:nth-child(2) {
background-color: gray;
}
div:nth-child(3) {
background-color: #87CEEB;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>t</div>
</section>
</body>
</html>
align-items調整側軸對齊（垂直對齊）
| 值 | 描述 | 白話文 |
| stretch | 默認值，項目被拉伸以適應容器 | 讓子元素的高度拉伸適用父容器（子元素不給高度的前提下） |
| center | 項目位於容器的中心 | 垂直居中 |
| flex-start | 項目位於容器的開頭 | 垂直對齊開始位置 相當於上對齊 |
| flex-end | 項目位於容器的結尾 | 垂直對齊結束位置 相當於下對齊 |
flex-wrap
| 值 | 描述 |
| nowrap | 默認值，規定靈活的項目不拆行或不拆列。不換行，則收縮（壓縮）顯示 強制一行內顯示 |
| wrap | 規定靈活的項目在必要的時候拆行或拆列 （換行） |
| wrap-reverse | 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序（翻轉） |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 1000px;
height: 600px;
border: 2px solid skyblue;
margin: 100px auto;
display: flex;
/* justify-content: flex-start; */ /* 讓子元素從父容器的開頭排序 */
/* justify-content: flex-end; 讓子元素從父容器的後面開始排序 但是盒子的順序不變 */
/* justify-content: center; 讓子元素位於父容器中間顯示 */
/* justify-content: space-between; 左右的盒子貼近父盒子，中間的平均分佈空白間距 */
justify-content: space-around; /* 相當於給每個盒子添加了左右margin外邊距 */
/* 垂直對齊 */
/* align-items: flex-start; 上對齊 */
/* align-items: flex-end; 低對齊 */
/* align-items: center; 垂直居中 */
align-items: stretch;
/* 讓子元素的高度拉伸適用父容器（子元素不給高度的前提下） 相當與height: 100%;*/
/* 規定靈活的項目不拆行或不拆列. 不換行,則收縮(壓縮)顯示強則一行內顯示 */
flex-wrap: nowrap;
/* flex-wrap: wrap; 換行 */
/* flex-wrap: wrap-reverse; 翻轉 */
}
div {
width: 250px;
/* height: 200px; */
}
div:first-child {
background-color: skyblue;
}
div:nth-child(2) {
background-color: gray;
}
div:nth-child(3) {
background-color: #87CEEB;
}
div:nth-child(4) {
background-color: purple;
}
div:nth-child(5) {
background-color: pink;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>t</div>
<div>4</div>
<div>5</div>
</section>
</body>
</html>
align-content 堆棧（由flex-wrap產生的獨立行）多行垂直對齊方式
align-content是針對flex容器裏多軸（多行）的情況，align-items是針對一行的情況進行排列
必須對父元素設置自由盒屬性display: flex;並且設置排列方式爲橫向排列flex-direction;並且設置換行，flex-wrap:wrap;這樣這個屬性的設置纔會起作用
| 值 | 描述 |
| stretch | 默認值，項目被拉伸以適應容器 |
| center | 項目位於容器中心 |
| flex-start | 項目位於容器的開頭 |
| flex-end | 位於容器的結尾 |
| space-between | 項目位於各行之間留有空白的容器內 |
| space-around | 項目位於各行之前、之間、之後都留有空白的容器內 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
section {
width: 1000px;
height: 600px;
border: 2px solid skyblue;
margin: 100px auto;
display: flex;
flex-flow: row wrap; /* 這句話必須有否者不起效果 */
/* flex-direction: row; */
/* align-content: center; */
align-content: space-around;
}
div {
width: 250px;
height: 200px;
}
div:first-child {
background-color: skyblue;
}
div:nth-child(2) {
background-color: gray;
}
div:nth-child(3) {
background-color: #87CEEB;
}
div:nth-child(4) {
background-color: purple;
}
div:nth-child(5) {
background-color: pink;
}
div:nth-child(6) {
background-color: purple;
}
div:nth-child(7) {
background-color: greenyellow;
}
</style>
</head>
<body>
<section>
<div>one</div>
<div>two</div>
<div>t</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</section>
</body>
</html>
order控制子項目的排列順序，正序方式排序，從小到大
用css來控制盒子的前後順序。用order就可以
都默認爲0
用整數值來定義排列順序，數值小的排在前面，大的排在後面。可以爲負值，默認值爲0
order: 1;