饥人谷前端 | CSS flex 实践

实践

不同布局

• 用 flex 做两栏布局 [DONE]
• 用 flex 做三栏布局 [DONE]
• 用 flex 做四栏布局 [DONE]
• 用 flex 做平均布局 [DONE]
• 用 flex 组合使用，做更复杂的布局 [DONE]
• https://github.com/zkeq/jirengu_learn_03/blob/flex/daohang.css

经验

• 永远不要把 width 和 height 写死，除非特殊说明
• 用 min-width / max-width / min-height / max-height
• flex 可以基本满足所有需求
• flex 和 margin-xxx: auto 配合 有意外的效果

什么叫写死

写死

• width: 100px

不写死

• width: 50%
• max-width: 100px
• width: 30vw
• min-width: 80%
• 特点：不使用 px, 或者加 min max 前缀