flex布局：
使用：如果是pc端頁面布局，採用傳統方式；如果是移動端或者是不考慮相容的pc則採用flex；
特點：flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性操作，
面試：flex布局又叫伸縮 `布局 、彈性布局、伸縮盒布局、彈性盒布局 ；
名稱：語法：
display
:flex;
/* 確認主軸方向 */
/* row:行 （從左到右） 預設值 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
flex-direction
:row /* 預設值 從左到右 */
/* 主軸上 元素的排布方式 */
/* flex-start:從頭部開始排列 */
/* justify-content: flex-start; */
/* justify-content: flex-end; */
/* justify-content: center; */
/* 均分剩餘空間 */
/* justify-content: space-around; */
/* 剩餘空間分在元素之間 */
/* justify-content: space-between; */
/* 不換行；子專案加起來的寬度超過父級的寬度時，子項寬度會被縮小，寬度只是不生效，必須設定 */
flex-wrap
:nowrap;
/* 換行； 子項的總寬加起來超過父級寬度，就會換行*/
flex-wrap
:wrap;
/* 復合屬性：主軸 、換行 */
/* 控制元素在側軸上對齊方式，單行 */
/* align-items: flex-start; */
/* align-items: flex-end; */
/* align-items: center; */
/* stretch:拉伸，沿著側軸方向上進行拉伸，側軸方向上元素拉伸，設定子元素顯示長度,屬性必須關閉 */
align-items
: stretch;
場景：
/* 多行對齊：從頭（側軸）開始對齊 */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: stretch; */
/* align-content: space-around; */
align-content
: space-between;
目標：做乙個導航欄
單獨乙個元素：
"p">
"box">
"img">
info
"box">
"img">
info
/* 1.整體：flex布局，預設主軸方向 */
.p/* 2.區域性：flex布局，列排布，側軸居中對齊 */
.box
.img
p
.item
/* 單獨 側軸上對齊 */
align-self
: flex-start;
/* 預設值：繼承父親 */
align-self
: stretch;
/* 如果父親不設定align-items ；預設值auto就為拉伸*/
/* 如果父親設定align-items ；預設值auto就為繼承父親的設定*/
align-self
:auto;
align-self
: stretch;
使用：配合flex屬性，主軸方向自動劃分份數，側軸方向自動拉伸；
.item
.p
/* 2.區域性：flex布局，列排布，側軸居中對齊 */
/* 起始方向，顏色1，顏色2，...*/
background
:-webkit-linear-gradient
(30deg, red, blue)
;background-image
:-webkit-linear-gradient
(270deg, red, blue,yellow)
;/* 1.必須有私有字首*/
/* 2.起始方向：可以為方向名詞left 或 deg度數，預設從上到下*/
/* 3.顏色個數：最少2兩個顏色*/
布局 Flex伸縮布局
flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...
Flex伸縮布局
移動端瀏覽器我們主要對webkit核心進行相容 我們現在開發的移動端主要針對手機端開發 現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一 視口 就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口 視覺視口 理想視口 其中最常用的就是理想視口 布局視口 在早期手機還能打 和收簡訊的時代。廠商萌生...
伸縮布局等份flex
響應式的布局，跟著瀏覽器的變化而變化 1.給父元素設定flex布局 div div div section css section section div nth child 1 section div nth child 2 section div nth child 3 將section分成4份...