思想:通過給父容器設定屬性(display:flex || inline-flex),讓父容器有能力來改變子元素的寬度或者高度,以填滿可用空間,(可自適應不同尺寸裝置,故多用於移動端布局)
彈性盒模型布局在改變子元素排列方向,縮放,拉伸,收縮等方面,較傳統布局方式有優勢.
ps:1.css3 列在彈性盒模型中不起作用 2.float,clear,vertical-align在flex專案中,不起作用
基礎: 首先確定彈性盒模型分為主軸和側軸,如上圖所示
flex-direction:作用于父容器元素,確定主軸的方向,(從而規定子元素的排列方式),屬性值有:row(預設方向,由左到右,如上圖所示)row-reverse column column-reverse
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
彈性盒模型
1.父元素新增display 瀏覽器核心字首 box 2.瀏覽器核心字首 box orient vertical是盒模型的布局方向，預設橫向顯示 3.搜狗是webkit核心，大多相容性與谷歌相同。4.元素布局方向 與float類似 瀏覽器核心字首 box direction reverse 處理剩餘...
彈性盒模型
1 css3彈性盒模型 面試題！1.1 怪異盒模型與標準盒模型 1.1.1 兩者邊框大小一樣，彈性盒模型content大小發生變化。總體不變。標準盒模型content大小不變，總體發生變化。怪異盒模型 box sizing content box 標準盒模型 box sizing border bo...
彈性盒模型
1.flex 靈活性。採用flex布局的元素，flex容器 2.給裝眾多相同盒子的父盒子display flex.將盒子平均分配寬。它所有的子元素就會自動成為這個容器成員，flex專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...