flexbox 布局 （弹性布局）
2018-04-11 15:36:02 10 举报AI智能生成
Flex 弹性布局的思维导图
作者其他创作
大纲/内容
参考网站
MDN
简明教程
青蛙与 flex 练习
flex 展示
flex 展示
绝对弹性和相对弹性
自动外边距对齐
自动外边距对齐
阮一峰 Flex 布局教程：实例篇
10分钟学会基本的 Flexbox 布局
www.w3.org
flex
容器属性
display: flex | inline-flex
flex-direction: row | row-reverse | column | column-reverse
flex-wrap: nowrap | wrap | wrap-reverse
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;
flex-flow: <flex-direction> || <flex-wrap>
子元素
<integer>
<number>
<number>
order: <integer>;
flex-grow: <number>; /* default 0 */
flex-shrink: <number>; /* default 1 */
flex-basis: <length> | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*default 0 1 auto*/ 优先使用此值
align-self: flex-start | flex-end | center | baseline | stretch
理解
相等
注意事项
空匿名弹性项目不被渲染
导致某些属性的失效
magin
justify-content
justify-content
对齐方式不生效
没有多余空间
没有多余空间
浏览器支持
flexbugs
0 条评论
下一页
