彈性盒子——（flex，align-xxx，justify-content）樣式，定位，換行
阿新 • • 發佈：2022-03-10
前提
把display: flex的div容器叫做flexBox，被浮動的叫做flexItem
樣式————寬度——flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫
語法：felx: grow|shrink|basis ; //任選一個而不是都寫，一般就只用grow:number 或者 basis:百分比兩種。shrink是收縮，不好控制
設定在每個flexItem上可以為其按比例分配寬度
felx: 1; or flex: 10%; //basis如果所有flexItem的和大於了100%是要被換行的
樣式————排列方式felx-flow
是flex-direction和flex-warp的簡寫
語法
flex-flow: flex-direction flex-wrap;
方向flex-direction
| 值 | 描述 |
|---|---|
| row | 預設值。生的，順著排。 |
| row-reverse | 倒序排。 |
| column | 豎著排 |
| column-reverse | 豎著 + 倒序 |
| flex-direction和justify-content倒序排的區別：flex-direction是方向倒敘，justify-content是位置倒敘，如下 | <div color="green">1</div> <div color="blue">2</div> |
| flex-direction | justify-content |
換行felx-warp
nowrap，warp，wrap-reverse