HTML CSS 布局技巧：如何使用 Flexbox 保持三个块元素的固定比例 (1:2:1)

你可以使用flexbox布局来实现这个需求。在容器元素上设置display为flex，然后给每个块元素设置一个flex属性来控制它们的宽度比例。\n\nHTML代码示例：\n\nhtml\n<div class="container">\n <div class="block"></div>\n <div class="block"></div>\n <div class="block"></div>\n</div>\n\n\nCSS代码示例：\n\ncss\n.container {\n display: flex;\n}\n\n.block:nth-child(1),\n.block:nth-child(3) {\n flex: 1;\n}\n\n.block:nth-child(2) {\n flex: 2;\n}\n\n\n在上面的例子中，容器元素使用了flex布局，并且每个块元素使用了不同的flex属性来设置它们的宽度比例。第一个和第三个块元素的flex属性为1，代表它们的宽度比例为1:1；第二个块元素的flex属性为2，代表它的宽度比例为2:1。\n\n你可以根据实际需求调整容器和块元素的样式。