我们怎样才能仅使用 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

Flex 可以方便地正确定位 sidebar 和 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>

Answer 2

如果侧边栏和内容位于带有

display: flex

的容器中，您可以通过以下样式来实现此目的

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

.content {
  flex: 1;
}

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