思想:通過給父容器設置屬性(display:flex || inline-flex),讓父容器有能力來改變子元素的寬度或者高度,以填滿可用空間,(可自適應不同尺寸設備,故多用於移動端布局)

彈性盒模型布局在改變子元素排列方向,縮放,拉伸,收縮等方面,較傳統布局方式有優勢.

ps:1.css3 列在彈性盒模型中不起作用 2.float,clear,vertical-align在flex項目中,不起作用

基礎: 首先確定彈性盒模型分為主軸和側軸,如上圖所示

flex-direction:作用於父容器元素,確定主軸的方向,(從而規定子元素的排列方式),屬性值有:row

flex-wrap :作用於父容器元素,設置或檢索子元素超出父元素容器時是否換行, 屬性值有: wrap no-wrap(默認) wrap-reverse

( flex-flow=flex-direction+flex-wrap 作用於父容器元素,上面兩個屬性的二合一,設置或檢索子元素的排列方式)

justify-content: 作用於父容器元素,設置或檢索子元素在父元素主軸方向上的對齊方式,屬性值有: flex-start flex-end center space-between space-round

align-items: 作用於父容器元素,設置或檢索子元素在父元素側軸方向上的對齊方式,屬性值有:flex-start flex-end center baseline stretch

align-content: 作用於父容器元素,設置或檢索彈性盒堆疊伸縮行(子元素不止一行)的對齊方式,即當彈性盒有多根軸線的時候,屬性值:flex-start flex-end center space- between space-round stretch

下面的屬性都是關於子元素的:

order: 用整數值來定義排列順序，數值小的排在前面。可以為負值。

flex:設置或檢索伸縮盒對象的子元素如何分配空間。

align-self:設置或檢索彈性盒對象的子元素自身在側軸（縱軸）方向上的對齊方式, auto | flex-start | flex-end | center | baseline | stretch

關於彈性盒模型