響應式的布局，跟著瀏覽器的變化而變化
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份， 第乙個div佔乙份 第二個兩份 第三個乙份
*/
//在父元素中 ，即使用了display: flex;的盒子
section
3.伸縮布局的排列方式
排列方式預設是橫向的，即沿x軸
flex-direction
: row;
//水平排列
flex-direction
: column;
//垂直排列
flex-direction
: row-reverse;
//水平翻轉排列
flex-direction
: column-reverse;
//垂直翻轉排列
min
-width 響應式，響應到最小多少畫素的時候就停止，不再變化
max-width
justify-content 屬性的值
flex-start 預設值，專案位於容器的開頭 讓子元素從父元素的開頭開始排序，但是盒子順序不變
flex-end 專案位於容器的結尾。 讓子元素從父容器的後面開始排序，但是盒子順序不變
center 專案位於容器的中心 讓子元素在父容器中間顯示
space-around 專案位於各行之前，之間，之後都留有空白的容器內，相當於給每個盒子新增了margin 外邊距
5.align-items 垂直對齊
如果子元素的高度比父盒子的高度小，單**況下
屬性值：
flex-start 上對齊
flex-end 底對齊
center 垂直中心對齊
stretch 預設值 如果子元素不給高度，就會被拉伸，適應父元素的高度
6.flex-wrap 控制是否換行如果 子元素內容寬度超過父盒子的時候
nowrap 預設值 不拆行，不拆列 ，則壓縮顯示，強制一行顯示
wrap 超過的自動換行
wrap-reverse 換行顯示，翻轉， 和wrap是相反的。
7.flex-flowflex-flow是flex-direction 和flex-wrap的縮寫
flex-flow: flex-direction flex-wrap;
或者
flex-flow: 排列方向 換不換行;
8.align-content多行的情況下進行使用
必須在父元素中設定display: flex; 並且設定橫向排列flex-direction: row; 並設定換行 flex-wrap: wrap; 否則align-content不起作用
flex-end 底對齊
center 垂直中心對齊
stretch 預設值 如果子元素不給高度，就會被拉伸，適應父元素的高度
space-around 專案位於各行之前，之間，之後都留有空白的容器內，相當於給每個盒子新增了margin 外邊距
space-between 專案位於各行之間留有空白的容器內，左右盒子貼近父容器，中間的盒子平均分布空白間距
9.order屬性，控制子專案的排列順序，正序方式排列，從小到大
用css來控制盒子前後順序，不用非得到結構裡面，更改盒子的書寫順序
數字越小的排在最前面，，不寫的話就預設都是0，可以給負數，比0小。
在子盒子的css中：
order: -1;
布局 Flex伸縮布局
flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...
Flex伸縮布局
移動端瀏覽器我們主要對webkit核心進行相容 我們現在開發的移動端主要針對手機端開發 現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一 視口 就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口 視覺視口 理想視口 其中最常用的就是理想視口 布局視口 在早期手機還能打 和收簡訊的時代。廠商萌生...
flex伸縮布局
flex布局 使用 如果是pc端頁面布局，採用傳統方式 如果是移動端或者是不考慮相容的pc則採用flex 特點 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性操作，面試 flex布局又叫伸縮 布局 彈性布局 伸縮盒布局 彈性盒布局 名稱 語法 disp...