HTML布局技巧：如何使用Flexbox实现三个块的1:2:1比例宽度

\u003c!--DOCTYPE html--\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cstyle\u003e\n.container {\n display: flex;\n justify-content: space-between;\n}\n\n.block {\n flex: 1;\n margin: 10px;\n}\n\n.block img {\n width: 100%;\n height: auto;\n}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv class="container"\u003e\n\u003cdiv class="block"\u003e\n\u003cimg src="image1.jpg" alt="Image 1"\u003e\n\u003c/div\u003e\n\u003cdiv class="block"\u003e\n\u003cimg src="image2.jpg" alt="Image 2"\u003e\n\u003c/div\u003e\n\u003cdiv class="block"\u003e\n\u003cimg src="image3.jpg" alt="Image 3"\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n首先，我们创建一个类名为"container"的容器div，用于包含三个块。然后，我们使用flexbox布局将这个容器设为flex，并设置justify-content属性为space-between，这样三个块会在容器内均匀分布。\n\n接下来，我们创建一个类名为"block"的div，作为每个块的容器。我们使用flex属性将每个块的大小设为相等，flex: 1表示每个块的宽度会根据可用空间平均分配。我们还为每个块添加了一些边距，以便在视觉上分隔它们。\n\n最后，我们为每个块内的img元素设置了宽度为100%，高度自动适应，这样图片就可以根据容器的宽度按比例缩放。\n\n这样，无论容器的宽度如何变化，三个块的宽度比例都会保持为1:2:1。