FlexBox -如何显示一列100%和其他两列50%

FlexBox 是 CSS3 中引入的一种布局模式，用于创建灵活的、响应式的布局。它通过 display: flex 属性将容器设置为弹性容器，并允许其子元素（称为弹性项目）在主轴和交叉轴上进行灵活的排列。

基础概念

弹性容器（Flex Container）：通过设置 display: flex 或 display: inline-flex 的元素。
弹性项目（Flex Items）：弹性容器内的直接子元素。
主轴（Main Axis）：弹性项目排列的方向，默认是水平方向。
交叉轴（Cross Axis）：垂直于主轴的方向。

如何显示一列100%和其他两列50%

要实现这种布局，可以使用 FlexBox 的 flex 属性来控制每个弹性项目的宽度。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlexBox Layout</title>
    <style>
        .container {
            display: flex;
            height: 100vh; /* 设置容器高度为视口高度 */
        }
        .full-width {
            flex: 1; /* 占据剩余空间 */
            background-color: lightblue;
        }
        .half-width {
            flex: 0 0 50%; /* 固定宽度为50% */
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="half-width">Column 1 (50%)</div>
        <div class="full-width">Column 2 (100%)</div>
        <div class="half-width">Column 3 (50%)</div>
    </div>
</body>
</html>