主軸與側軸
flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有：行和列、x軸y軸
常見的父項屬性
flex-direction:設定主軸的排列方向
子元素事是跟著主軸來排列的
row:預設值從左向右
row-reverse:從右向左
column:從上到下
column-reverse:從下到上
justify-content:設定主軸上的子元素排列方式
center設定主軸的元素居中對齊
flex-wrap:設定子元素是否換行
flex-wrap屬性定義，flex布局中預設是不換行的
nowrap預設是不換行的
weap換行顯示
align-content:設定側軸上子元素的排列方式（用於多行）
設定子項在側軸上的排列方式，只能用於子項出現「換行」的情況下，在單行中沒有效果。
flex-start:預設值在側軸的頭部開始排列
flex-end:在側軸的尾部開始排列
center:在側軸中間顯示
space-around:子項在側軸平分剩餘空間
space-between:子項在側軸先分布在兩頭，再平分剩餘空間
stretch:設定子項元素高度平分父元素高度
align-items:設定側軸上的子元素排列方式（用於單行）
flex-start從上到下
flex-end從下到上
center垂直居中
stretch拉伸（預設值）
flex-flow:復合屬性，相當於同時設定了flex-direction和flex-wrap
flex布局子項常見的屬性
flex布局常見屬性
flex direction row 從左到右 預設值 flex direction row reverse 從右到左排序 flex direction columm 從上到下 flex direction columm reverse 從下到上justify content flex start ...
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 設...