Flex布局对齐与多行换行指南
Flex 布局的对齐方式挺灵活的，用起来也不复杂。尤其做响应式页面时，能省不少事。你只要在容器上加个 display: flex，剩下的基本就是控制方向、间距这些了。像justify-content、align-items这类属性，用几次就熟了。
主轴方向的控制也挺直观的。flex-direction: row默认横向排，想上下排？用column。再配合flex-wrap，多行布局也不怕挤，换行啥的轻轻松松。
项目对齐方面，主轴看justify-content，交叉轴就看align-items和align-content。比如你想让所有项目垂直居中，用align-items: center就行。如果有多行，那就再加个align-content。搭配用，效果会更灵活。
order属性可以随意调顺序，像做卡片组件时挺实用的；flex-grow和flex-shrink也蛮有意思，能让元素自适应撑满或者收缩。尤其在做多列布局时，flex: 1常常是“万能钥匙”。
兼容性方面你也不用太担心，现在主流浏览器都支持得还不错。旧版的加下-webkit-前缀就能搞定。如果你做移动端页面，那更推荐用 Flex 布局，适配各种屏幕都比较省心。
如果你刚接触 Flex 布局，可以从一些小组件开始练练手。比如导航条、卡片容器或者图文混排。练熟了之后，再用在复杂的响应式页面上就轻松多了。
文件大小：3.29MB
评论区