我们可以用 flex 做些什么来获得这样的布局？答案

【问题标题】：What can we do get a layout like this using just flex?我们可以用 flex 做些什么来获得这样的布局？
【发布时间】：2019-06-23 11:37:14
【问题描述】：

我想要这样的布局，谁能帮我写css代码？？我的 HTML（我在 HTML 中的样式中移动了我的 CSS）-:

<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>

【问题讨论】：

你能告诉我们你的尝试吗？因此我们可以帮助您编写 CSS 代码。

标签： css sass flexbox less

【解决方案1】：

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

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

.content {
  flex: 1;
}

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

【讨论】：

【解决方案2】：

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>

【讨论】：