flex 是 flexible box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。當我們為父盒子設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性將失效。
伸縮布局 = 彈性布局 = 伸縮盒布局 = 彈性盒布局 =flex布局
pc端：用傳統布局
移動端：用flex布局
❦給父盒子新增flex屬性來控制子盒子的位置和排列方式
display：flex; 開啟flex布局
主軸和側軸是會變化的，就看 flex-direction 設定誰為主軸，剩下的就是側軸。而我們的子元素是跟著主軸來排列的，在主軸上一行顯示屬性
描述row
預設值從左到右（x軸方向）
row-reverse
從右到左
column
從上到下（y軸方向）
column-reverse
從下到上
屬性描述
flex-start
預設值從頭部開始，如果主軸是x軸，則從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊(如果主軸是x軸則水平居中)
space-around
平分剩餘空間
space-between
先兩邊貼邊再平分剩餘空間（(重要)
space-evenly
平均分配
❀ 區別space-around，space-between，space-evenly
/* 開啟flex布局 */
display
: flex;
/* space-around|平分剩餘空間 */
/* 開啟flex布局 */
display
: flex;
/* space-between|先兩邊貼邊再平分剩餘空間（(重要) */
/* 開啟flex布局 */
display
: flex;
/* space-evenly|平均分配 */
預設情況下，專案都排在一條線（又稱」軸線」）上。flex-wrap屬性定義，flex布局中預設是不換行的。
屬性
描述nowrap
預設值，不換行
wrap
換行
該屬性是控制子項在側軸（預設是y軸）上的排列方式在子項為單項（單行）的時候使用
屬性
描述flex-start
預設值從上到下
flex-end
從下到上
center
擠在一起居中(垂直居中)
stretch
拉伸
設定子項在側軸上的排列方式並且只能用於子項出現換行的情況（多行），在單行下是沒有效果的。
屬性
描述flex-start
預設值在側軸的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
❀ align-content 和 align-items 區別
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復合屬性
flex 屬性定義子專案分配剩餘空間，用flex來表示佔多少份數。
flex
:;
【嘰嘰歪歪】設定了flex以後，子標籤表示主軸空間的樣式就不起作用了
align-self 屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋 align-items 屬性。
預設值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
屬性定義專案的排列順序
【嘰嘰歪歪】沒得案例，找不到☢
移動Web開發 移動端常見布局 rem布局
三 rem 查詢 四 less使用 建新檔案，字尾.less 1 rem root em 是乙個相對單位，類似於em，em是父元素字型大小。rem的基準是相對於html元素的字型大小。比如 根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24p...
Web移動端布局
螢幕尺寸是指螢幕對角線的長度，單位為英吋，1英吋 2.54厘公尺 常見移動端裝置螢幕尺寸 iphone4 3.5英吋 iphone6,7,8 4.7英吋 iphone6,7,8 plus 5.5英吋 iphone5 4英吋 螢幕解析度是指橫縱方向上的畫素點數，單位為px，1px 1畫素點 常見移動端...
web移動端布局
對移動端適配不熟悉的同學，可以看看 使用flexible實現手淘h5頁面的終端適配 再聊移動端頁面的適配 如何在vue專案中使用vw實現移動端適配 vw 是什麼？vw viewport s width 簡寫，1vw 等於 window.innerwidth 的 1 vh viewport s hei...