css中flex彈性盒子的介紹

今天主要從他幾個屬性來介紹彈性盒子

display: flex；把元素設定成彈性容器

1.flex-direction:可以改變flex容器的方向讓其子項目來彈性布局row定義主軸方向為X軸從左至右row-reverse 從右至左column 定義主軸方向為Y軸從上到下

2.justify-content相片順序，讓其子項目按不同方式進行排列flex-start: 從行首開始排列。flex-end: 從行尾開始排列center: 元素向每行中點排列。space-between : 在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素與行首對齊，每行最後一個元素與行尾對齊。space-around:在每行上均勻分配彈性元素。相鄰元素間距離相同。每行第一個元素到行首的距離和每行最後一個元素到行尾的距離將會是相鄰元素之間距離的一半。

3.flex-wrap用來設定換不換行nowrap:flex 的元素被擺放到到一行wrap: flex 元素大於整個父級整個元素時就會另起一行進行排列wrap-reverse :和 wrap 的行為一樣,但會與原來的方向相反4.align-items:彈性盒子的對齊

baseline設定文本對其。如就是設定的baseline對其