css flex layout
2019-04-25 本文已影响0人
泠泉
- 声明元素为flex-container
display: flex;
display: inline-flex;
-
flex-container
6个属性
| attr | value |
|---|---|
| flex-direction | row | row-reverse | column | column-reverse |
| flex-wrap | nowrap | wrap | wrap-reverse |
flex-flow |
<flex-direction> <flex-wrap> |
| justify-content | flex-start | flex-end | center | space-between | space-around |
| align-items | flex-start | flex-end | center | baseline | stretch |
| align-content | flex-start | flex-end | center | space-between | space-around | stretch |
align-content 稍微难理解，主要描述项目多且可折行时，形成了多cross-axis时，做一个整体偏正。
即：justify-content is for main-axis, and align-content is for cross-axis
-
flex-item
6个属性
| attr | value | means |
|---|---|---|
| order | <integer> |
排列顺序。数值越小，排列越靠前，默认为0 |
| flex-grow | <number> /* default 0 */ |
放大比例,用于有剩余空间时，类似栅格属性的colum-span |
| flex-shrink | <number>/* default 1 */ |
缩小比例，用于空间不足，如果设其中一个为0，那将只有它不收缩 |
| flex-basis | <length> | auto; /* default auto */ |
在分配多余空间之前，项目占据的主轴空间（main size） |
flex |
none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] |
- |
| align-self | auto | flex-start | flex-end | center | baseline | stretch |
与其他项目不一样的对齐方式 |
- 参考细节
http://www.runoob.com/w3cnote/flex-grammar.html
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
