Что мы можем сделать, чтобы получить такой макет, используя просто flex? - PullRequest
Новая
       28

Что мы можем сделать, чтобы получить такой макет, используя просто flex?

0 голосов
/ 30 января 2019

Я хочу такой макет, кто-нибудь может мне помочь с кодом 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>

enter image description here

Ответы [ 2 ]

0 голосов
/ 30 января 2019

Flex удобен для правильного расположения и размера элементов sidebar и content , как в примере ниже.

Нет необходимости в фиксированной ширине пикселя или использовании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>
0 голосов
/ 30 января 2019

, если боковая панель и содержимое находятся в контейнере с display: flex, вы можете добиться этого с помощью следующего стиля: 

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

.content {
  flex: 1;
}

Хотя вы можете рассмотреть фиксированную боковую панель, именно так вы добьетесь макета наТвоя фотография.

...