css flex layout

作者: 泠泉 | 来源:发表于2019-04-25 06:10 被阅读0次

我对 Flex 布局的一些认知
css flex layout
【19】flex布局教程（转）
给表格设置宽度，不起作用
Flex布局
CSS（flex）
Flex布局教程
Flex 布局
Flex 布局教程：语法篇
前端训练营第七周学习总结

声明元素为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