flex彈性盒子佈局常用語法篇
1. flex-direction:設定flex子元素的排列順序
row :從左到右;
row-reverse:橫向反向;
column:從上到下;
column-reverse:縱向反向;
2.flex-wrap:設定flex子元素是否換行
nowrap:預設不換行;
wrap:換行;
wrap-reverse:換行並改變順序;
3.justify-content:flex子元素的橫向的排列順序
flex-start:flex子元素在最左邊;
flex-end:flex子元素在最右邊;
center:flex子元素在正中間;
space-between:平分flex容器;
space-around:平分flex容器,但是每個子元素兩邊是子元素間距的一半;
4.align-content:flex元素在縱向上的排列方式(一般處理多行);
flex-start:flex子元素在最上邊;
flex-end:flex子元素在最下邊;
center:flex子元素在縱向正中間;
space-between:縱向平分flex容器;
space-around:縱向平分flex容器,但是每個子元素兩邊是子元素間距的一半;
stretch:預設;
5.align-items:flex子元素在縱向上的排列方式(一般是處理單行);
flex-start:flex子元素在最上邊;
flex-end:flex子元素在最下邊;
center:flex子元素在縱向正中間;
baseline:如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊;
stretch:高度100%,寬度自動;
6. align-self: 針對flex的子元素;
flex-start:flex子元素在最上邊;
flex-end:flex子元素在最下邊;
center:flex子元素在縱向正中間;
baseline:如彈性盒子元素的行內軸與側軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對齊;
stretch:高度100%,寬度自動;