0基础学前端：100天拿offer实战课（第4天）—— Flex布局实战：10分钟搞定网页“排版难题”

大家好，我是专栏作者soda。昨天咱们用CSS把个人介绍页从“毛坯房”改成了“精装修”，不少同学在打卡时问：“怎么让兴趣爱好的列表横向排列？”“怎么把联系信息放在页面右侧？”“为什么图片和文字总对不齐？”——这些其实都是“布局”问题，而今天要学的Flex布局，就是解决这些问题的“万能钥匙”。

之前咱们用margin、padding调布局，就像用尺子一点点量距离，效率低还容易乱；而Flex布局相当于给容器装了“智能排版系统”，只需几行代码，就能实现“居中对齐、左右分布、横向排列”等常见需求，新手也能10分钟上手。今天全程实操，核心目标：用Flex布局改造个人介绍页，解决3个经典布局难题，掌握Flex的5个核心属性。

在开始实操前，先搞懂Flex布局的“底层逻辑”，不然学了属性也容易用错。

一、新手必懂：Flex布局的2个核心概念

Flex布局又称“弹性布局”，核心就是“容器”和“项目”这两个概念，搞懂它们的关系，后续学习会事半功倍，花3分钟就能吃透。

1. 容器与项目：父子关系要分清

Flex布局是“父子联动”的：给父元素（容器）设置display: flex;后，父元素里面的直接子元素（项目）就会自动变成“弹性项目”，可以通过控制容器的属性来调整项目的排列方式。

举个例子：如果想让“兴趣爱好”的4个列表项横向排列，那么包含这4个列表项的<ul>就是“容器”，每个<li>就是“项目”——只需给<ul>加display: flex;，4个<li>就会自动横向排列，不用再调float（浮动布局容易出bug，新手尽量不用）。

<