flex是 flexible box 的縮寫，意為「彈性布局」，用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。
採用flex布局的元素，稱為flex容器，簡稱「容器」。它的所有子元素自動成為容器成員，成為flex專案，簡稱「專案」。
總結：通過給父盒子新增flex屬性，來控制子盒子的位置和排列方式。
屬性說明
flex-direction
設定主軸的方向
justify-content
設定主軸上的子元素排列方式
flex-wrap
設定子元素是否換行
align-content
設定側軸上的子元素的排列方式（多行）
align-items
設定側軸上的子元素的排列方式（單行）
flex-flow
符合屬性，相對於同時設定了flex-direction和flex-wrap
在flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸和y軸。
預設主軸方向是x軸方向，水平向右預設側軸方向是y軸方向，水平向下
flex-direction屬性決定主軸的方向（即專案排列方向）
注意：主軸和側軸是會變化的，就看flex-direction設定誰為主軸，剩下的就是側軸。而子元素是跟著主軸來排列的。
屬性值說明
row預設值從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
justify-content屬性定義了專案在主軸上的對齊方式。
注意：使用這個屬性之前一定要確定好主軸是哪個
屬性值說明
flex-start
預設值，從頭部開始；如果主軸是x軸，則從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊（如果主軸是x軸則水平居中）
space-around
平分剩餘空間
space-between
先兩邊貼邊，再平分剩餘空間（重要）
預設情況下不換行，如果裝不開，會縮小子元素寬度。
屬性值說明
nowrap
預設值，不換行
wrap
換行該屬性是控制子項在側軸（預設是y軸）上的排列方式，在子項為單項（單行）時使用
屬性值說明
flex-start
預設值，從上到下
flex-end
從下到上
center
擠在一起居中（垂直居中）
stretch
拉伸設定子項在側軸上的排列方式並且只能用於子項出現換行（多行）的情況，在單行下是沒有效果的。
屬性值說明
flex-start
預設值在側軸的頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
stretch
設定子項元素高度平分父元素高度
flex屬性定義子專案分剩餘空間，用flex來表示佔多少份數。align-content和align-items區別：
.item
background
:linear-gradient
(起始方向,顏色1,顏色2,...)
;/* 背景漸變必須新增瀏覽器私有字首 */
background
:-webkit-linear-gradient
(left, red, blue)
;background
:-webkit-linear-gradient
(left top, red, blue)
;
Flex伸縮布局
移動端瀏覽器我們主要對webkit核心進行相容 我們現在開發的移動端主要針對手機端開發 現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一 視口 就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口 視覺視口 理想視口 其中最常用的就是理想視口 布局視口 在早期手機還能打 和收簡訊的時代。廠商萌生...
flex伸縮布局
flex布局 使用 如果是pc端頁面布局，採用傳統方式 如果是移動端或者是不考慮相容的pc則採用flex 特點 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性操作，面試 flex布局又叫伸縮 布局 彈性布局 伸縮盒布局 彈性盒布局 名稱 語法 disp...
flex布局 彈性布局 伸縮布局
主要介紹下彈性布局的常用的一些屬性 當乙個盒子設定為display flex的時候,盒子會變為乙個彈性盒子,盒子內部的子元素會預設沿著主軸方向排布,此時會引出主軸和側軸的概念。主軸 預設水平向右 類似於x軸 側軸 與主軸垂直的就是側軸,預設垂直向下 類似於y軸 彈性盒子的主軸方向預設水平向右,但是可...