彈性盒子（Flexible Box/filebox）是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的佈局方式。引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。 彈性盒子由彈性容器（父元素）和彈性子元素（可以一個或者多個）組合 ...
彈性盒子（Flexible Box/filebox）是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的佈局方式。引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器（父元素）和彈性子元素（可以一個或者多個）組合而成。彈性容器通過設置display屬性的值為flex或者是inline-flex將其定義為彈性容器。
一、display:flex
作用：讓當前元素形成盒，控制子元素。
特點：彈性盒裡的子元素，都是沿著主軸排列，預設情況下，主軸為X軸。彈性盒裡的子元素都能直接添加寬高（不用在乎是塊元素還是行內元素）。讓彈性盒裡的一個子元素左右上下居中，直接給子元素添加margin:auto ;就可。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section{ display: flex; } span{ width: 100px; height: 100px; background-color: green; margin: auto; } </style> </head> <body> <section> <span></span> </section> </body> </html>
二、具有以下屬性：
1、flex-direction 改變主軸的排列方向
屬性值：
row X為主軸
column Y為主軸
row-reverse 在主軸反向排列
2、justify-content 主軸對齊方式
屬性值：
flex-start 預設，頂端對齊
flex-end 末端對齊
center 居中對齊
space-between 兩端對齊，中間自動分配
space-around 自動分配距離
3、align-items 側軸對齊方式
屬性值：
flex-start 預設，頂端對齊
flex-end 末端對齊
center 居中對齊
baseline和flex-start等效
4、flex-wrap 換行
屬性值：
wrap 換行
nowrap 不換行
wrap-reverse 反向換行
5、allign-content 行與行之間對齊方式
屬性值：
flex-start 預設，頂端對齊
flex-end 末端對齊
center 居中對齊
space-between 兩端對齊，中間自動分配
space-around 自動分配距離
6、align-self 控制一個子元素（靈活元素）在側軸的對齊方式
屬性值：
auto 預設值。元素繼承了它的父容器的align-items屬性，如果沒有父容器則為“stretch”
stretch 元素被拉伸以適應容器
content 元素位於容器的中心
flex-start 元素位於容器的開頭
flex-end 元素位於容器的結尾
7、order 排序（控制子元素的先後順序，數值越大越向後排。可以為負）
8、flex:1 把剩餘空間全部分配給當前元素（當然指的是分配主軸上的空間）
flex是一個複合屬性,設置或者是檢索彈性盒模型對象的子元素如何分配空間
新版盒模型
flex三個屬性介紹：flex-grow:一個數字，規定項目相對於其它靈活的項目進行擴展的量
flex-shrink:一個數字，規定項目將相對於其它靈活項目進行收縮的量
flex-basis:項目長度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding:0; margin:0; box-sizing: border-box; } #section1{ width: 600px; height: 500px; background-color: aliceblue; margin: auto; display: flex; flex-direction: column; /* flex-direction: row-reverse; */ flex-direction: row; /*屬性1*/ justify-content: center; justify-content: space-around; /*屬性2*/ align-items: baseline; align-items: flex-start; align-items: center; /*屬性3*/ flex-wrap: wrap; /*屬性4*/ align-content: flex-end; align-content: center; /*屬性5*/ } span{ width: 100px; height:100px; background: orange; border-radius: 50%; font-size: 20px; color:white; text-align: center; } #section2{ width: 600px; height: 400px; background-color: aliceblue; margin: 0 auto; display: flex; align-items: center; } div{ width: 100px; height: 100px; background-color: antiquewhite; font-size: 20px; color:white; text-align: center; } div:nth-child(1){ background-color: red; order: 3; /* 屬性7 */ flex:1; /* 屬性8 */ } div:nth-child(2){ background-color: blue; /* align-self: flex-end; 屬性6 */ flex:1; border:10px solid green; } div:nth-child(3){ flex:1; } </style> </head> <body> <section id="section1"> <span>1</span> <span>2</span> <span>3</span> <span >4</span> <span>5</span> <span>6</span> <span>7</span> </section> <br> <section id="section2"> <div>div1</div> <div>div2</div> <div>div3</div> </section> </body> </html>
案例1：骰子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; } body { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; } div { width: 100px; height: 100px; background-color: #e7e7e7; padding: 4; border-radius: 10px; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; } span { display: block; width: 24px; height: 24px; background-color:
