彈性盒模型
在容器上設定樣式：（給父元素設定的樣式）
display:flex;（這是開啟彈性盒子模型的開關）
flex-direction容器內元素的排列方向（預設橫向排列）、屬性值：row（預設值、沿水平主軸讓元素從左向右排列） | row-reverse（沿水平主軸讓元素從右向左排列） | column（讓元素沿垂直主軸從上到下垂直排列） |column-reverse（讓元素沿垂直主軸從下到上垂直排列）
flex-wrap（容器內元素的換行）1：flex-wrap: nowrap; (預設)元素不換行,比如：乙個div寬度100%，設定此屬性，2個div寬度就自動變成各50%；
2：flex-wrap: wrap; 元素換行,比如：乙個div寬度100%，設定此屬性，第二個div就在第二行了；
justify-content 元素在主軸（頁面）上的排列
center（元素在主軸上的居中排列）
flex-start 元素在主軸頁面上由左或者上開始排列
flex-end 元素在主軸頁面上由右或者下開始排列
space-between 元素在主軸頁面上左右兩端或者上下 兩端開始排列
space-around 每個元素兩側的間隔相等，所以，元素之間的間隔比元素與邊框的間隔大一倍
align-items 元素在主軸頁面當前行的縱軸（橫軸）方向上的對齊方式
align-items : flex-start; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界（靠上對齊）。
align-items : flex-end; 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。（靠下對齊）
align-items : center; 彈性盒子元素在該行的側軸（縱軸）上居中放置。（居中對齊）
align-items : baseline; 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。（靠上對齊）
彈性盒模型
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專案。當所有子元素的寬大于父元素的寬，則子元素的寬由父盒子決定，平均分配寬。當所有子元素的寬小於父元素的寬，則子元素的寬...