布局的傳統解決方案，基於盒狀模型，依賴display 屬性+ position 屬性+ float屬性。
它對於那些特殊布局非常不方便 垂直居中等。
flex 簡便 、完整 、響應式 實現各種頁面布局。
flex是flexible box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為flex布局以後，子元素的float、clear和vertical-align屬性將失效。
flex 是 flex-grow、flex-shrink、flex-basis的縮寫。
特點：元素容器沒有足夠的空間，無需計算自動設定同意行、同列。
容易在容器內左、中、右對齊。
無需修改結構可以可以改變顯示順序。
容器設定百分比視窗改變大小，子元素自動分配寬度或高度比例。
容器屬性：
flex ：box2 不隨著子元素變化 100% 撐滿螢幕
inline-flex ：box2 隨著 m-1 ... m-5 的寬高自適應
.step1row-reverse ：子元素倒序排成一行
column：子元素排成一列
column-reverse ：子元素倒序排成一列
center 、space -between、space-around使用廣泛
.flex-end: 子元素在容器中右對齊
center: 子元素聚集在中間排列
space-between: 兩個元素有間隔排列，撐滿容器
space-around: 每個子元素間隔間距左右16px，包括容器
在一行或一列排不下，是否允許換行
nowrap:(預設顯示) 單行顯示
wrap: 多行顯示，子元素會溢位容器
.align-items: flex-start |flex-end| center | basline | stretch
<flex-end 交叉軸終點對齊 ，左下角對齊
center 交叉軸中點對齊，容器垂直居中對齊
baseline 專案第一行文字的基線對齊
stretch 預設 如果專案未設定高度或設定為auth ，將佔滿整個容器
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
| 值 | 描述 | |
| auto | 預設值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。 | |
| stretch | 元素被拉伸以適應容器。 | |
| center | 元素位於容器的中心。 | |
| flex-start | 元素位於容器的開頭。 | |
| flex-end | 元素位於容器的結尾。 | |
| baseline | 元素位於容器的基線上。 | |
| initial | 設定該屬性為它的預設值。 | |
| inherit | 從父元素繼承該屬性。 | |
align-self: center;
<css盒子模型 CSS 盒子模型
css 盒子模型基本上是面試的必考題，因為實在是太重要了。以前寫 css 總是感覺元素的寬高十分難調，其中乙個很大的問題就是忽略了盒子模型的重要性。說到 css 盒子模型，你可能會說我知道呀，就是 margin 包 border,border 包 padding,padding 包 content ...
css盒子模型 說說css盒子模型
引用mdn官方的解釋 當對乙個文件進行布局 lay out 的時候，瀏覽器的渲染引擎會根據標準之一的 css 基礎框盒模型 css basic box model 將所有元素表示為乙個個矩形的盒子 box css 決定這些盒子的大小 位置以及屬性 例如顏色 背景 邊框尺寸 每個盒子由四個部分 或稱區...
css盒子模型 前端系列 css盒子模型
1 盒子模型 下圖中可以看到，在設定width的時候，標準的盒子模型是不包括border和padding的，而在ie瀏覽器中是包括這兩項的。盒模型是有兩種標準的，乙個是標準模型，乙個是ie模型。標準模型中，盒模型的寬高只是內容 content 的寬高，預設正是w3c標準盒模型。而在ie模型中盒模型的...