通過給父盒子新增flex屬性，來控制盒子的位置和排列方式。 屬性
說明flex-direction
設定主軸方向
justify-content
設定主軸上的子元素排列方式
flex-wrap
設定子元素是否換行
align-content
設定側軸上的子元素排列方式（單行）
align-items
設定側軸上的子元素排列方式（多行）
flex-flow
同時設定flex-direction和flex-wrap
在flex布局中，分為主軸和側軸兩個方向
預設主軸方向是x軸方向，水平向右
預設側軸方向是y軸方向，水平向左
flex-direction屬性決定主軸的方向
主軸和側軸是會變化的，flex-direction設定誰為主軸，剩下的就是側軸
子元素跟著主軸排列
屬性值說明
row預設 從左到右
row-reverse
從右到左
column
從上到下
column-reverse
從下到上
使用這個屬性前確定好主軸是哪個
屬性值說明flex-start
預設 從頭部開始，如果主軸是x軸，從左到右
flex-end
從尾部開始排列
center
在主軸居中對齊（主軸是x軸則水平居中）
space-around
平分剩餘空間
space-between
先兩邊貼邊，再平分剩餘空間
屬性值說明
nowrap
預設 不換行
wrap
換行屬性值
說明flex-start
預設 從上到下
flex-end
從下到上
center
垂直居中
strech
拉伸（子盒子不帶高度，否則無效）
只能用於子項出現換行的情況
屬性值說明flex-start
預設 在側軸頭部開始排列
flex-end
在側軸的尾部開始排列
center
在側軸中間顯示
space-around
子項在側軸平分剩餘空間
space-between
子項在側軸先分布在兩頭，再平分剩餘空間
strech
設定子項元素高度 平分父元素高度
每日所學筆記會持續更新，前端的兄弟姐妹們，一起加油！
flex布局常見父項屬性
1.flex direction 設定主軸的方向 2.justify content 設定主軸上的子元素排列方式 3.flex wrap 設定子元素是否換行 4.align content 設定側軸上的子元素的排列方式 多行 5.align items 設定側軸上的子元素排列方式 單行 6.flex...
flex布局常見屬性
flex direction row 從左到右 預設值 flex direction row reverse 從右到左排序 flex direction columm 從上到下 flex direction columm reverse 從下到上justify content flex start ...
flex布局的常見屬性
主軸與側軸 flex布局中，是分為主軸和側軸兩個方向，同樣的叫法有 行和列 x軸y軸 常見的父項屬性 flex direction 設定主軸的排列方向 子元素事是跟著主軸來排列的 row 預設值從左向右 row reverse 從右向左 column 從上到下 column reverse 從下到上...