1. 程式人生 > >flex彈性盒子佈局常用語法篇

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%,寬度自動;