flex-direction:row; 從左到右 (預設值)
flex-direction
:row-reverse 從右到左排序
flex-direction
: columm 從上到下
flex-direction
:columm-reverse 從下到上
justify-content:flex-start 從頭部開始 如果主軸是x軸，則從左到右(預設值)
justify-content
:flex-end 從尾部對齊
justify-content
:center 在主軸居中對齊(如果主軸是x軸則水平居中)
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 擠在一起居中(垂直居中) 如果想要居中對齊 就要新增 justify-content
:center;
align-items
:stretch 拉伸(預設值) 繼承父盒子高度(注意：子盒子不能給高度)
align-content:flex-start 在側軸的頭部開始排列(預設值)
align-content
:flex-end 在側軸的尾部開始排列
align-content
:center 在側軸中間顯示
align-content
:space-around 子項在側軸平分剩餘空間
align-content
:space-between 子項在側軸先分布在兩頭，在平分剩餘空間
align-content
:stretch 設定子項元素高度平分父元素高度
-flex-direction和flex-wrap的復合屬性flex-direction:column
flex-wrap
:wrap
flex-flow
:column wrap 等價於上面兩句**
flex
:1;
flex布局的常見屬性
主軸與側軸 flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有 行和列 x軸y軸 常見的父項屬性 flex direction 設定主軸的排列方向 子元素事是跟著主軸來排列的 row 預設值從左向右 row reverse 從右向左 column 從上到下 column reverse 從下到上...
flex布局常見父項屬性
1.flex direction 設定主軸的方向 2.justify content 設定主軸上的子元素排列方式 3.flex wrap 設定子元素是否換行 4.align content 設定側軸上的子元素的排列方式 多行 5.align items 設定側軸上的子元素排列方式 單行 6.flex...
flex布局 父項常見屬性
通過給父盒子新增flex屬性，來控制盒子的位置和排列方式。屬性 說明flex direction 設定主軸方向 justify content 設定主軸上的子元素排列方式 flex wrap 設定子元素是否換行 align content 設定側軸上的子元素排列方式 單行 align items 設...