flex布局中如何让其中一个子元素占总宽度的三份，其余的子元素各占一份在 Flexbox 布局中，你可以使用 flex

在 Flexbox 布局中，你可以使用 flex 属性来指定每个子元素应该占据的空间比例。为了让一个子元素占总宽度的三份，而其余的子元素各占一份，你可以按照以下步骤进行设置：

给父容器设置 display: flex。
使用 flex 属性来分配每个子元素的宽度比例。

假设你有四个子元素，其中第一个子元素需要占三份，其余三个各占一份，你可以这样写：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Flexbox Example</title> 
<style> 
.container { display: flex; } 
.item1 { 
    flex: 3; /* 第一个子元素占三份 */
    background-color: lightcoral; 
} 
.item2, .item3, .item4 { 
    flex: 1; /* 其余子元素各占一份 */ 
    background-color: lightblue; 
} 
.item { 
    height: 100px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: white; 
    font-weight: bold; 
}
</style> 
</head>
<body> 
<div class="container"> 
    <div class="item item1">Item 1 (3 parts)</div> 
    <div class="item item2">Item 2 (1 part)</div>
    <div class="item item3">Item 3 (1 part)</div> 
    <div class="item item4">Item 4 (1 part)</div> 
</div> 
</body> 
</html>

在这个例子中：

.container 被设置为 display: flex，使其成为一个 Flex 容器。
.item1 的 flex 属性被设置为 3，表示它应该占据容器总宽度的三份。
.item2、.item3 和 .item4 的 flex 属性被设置为 1，表示它们各自应该占据容器总宽度的一份。

这样，第一个子元素将占据容器宽度的 75%（3/4），而其余三个子元素将各占据 25%（1/4）。