我们仅用flex就能得到这样的布局吗？

Question

我想要一个这样的布局，任何人都可以通过CSS代码帮助我吗？ 我的HTML（我已经将CSS的样式更改为HTML）-：

<div class="container" style={{ display: "flex", flexWrap: "wrap" }}>
    <div class="orange" style={{ flex: 1 }}>
      <div id="chart" />
    </div>
    <div class="yellow" style={{ flex: 1 }}>
      <LineChart
        width={600}
        height={300}
        data={this.state.data2}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <XAxis dataKey="name" />
        <YAxis />
        <CartesianGrid strokeDasharray="3 3" />
        <Tooltip />
        <Legend />
        <Line
          type="monotone"
          dataKey="pv"
          stroke="#8884d8"
          activeDot={{ r: 8 }}
        />
        <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    </div>
  </div>

Answer 1

如果侧边栏和内容位于带有display: flex的容器中，则可以使用以下样式实现此目的

.sidebar {
  // set width
  width: 200px; // for example
}

.content {
  flex: 1;
}

尽管您可能考虑使用固定的侧边栏，但这是在图片上实现布局的方式。

Answer 2

Flex可以方便地正确放置和调整侧边栏和 content 元素的大小，如下例所示。

不需要任何固定的像素宽度，也无需为简单的块元素 header 和 footer 使用flex。

.header { background: red; }
.sidebar { background: orange; }
.content { background: yellow; }
.footer { background: green; }

.container {
    display: flex;
}

.sidebar {
    flex: 1;
}

.content {
    flex: 3;
}

<div class="header">header</div>
<div class="container">
    <div class="sidebar">sidebar</div>
    <div class="content">content</div>
</div>
<div class="footer">footer</div>