Question

我偶然发现了flex，我正在尝试创建一个布局。

<div class="charts">
  <div class="chart longer">
  </div>
  <div class="chart short">
  </div>
</div>

我会有flex div一个流畅的，fixed width div将保持200px。

我使用了以下css并且已经成功。

.charts {
  display: flex;
  flex: 1;
}

.chart.longer {
  flex: 1;
}
.chart.short {
  flex: 0 0 200px;
}

从这里开始，我希望较长的div保持流畅并保持100％，并.chart.sort清除到新行并在下一个断点处占据100％的宽度。

  @media only screen and (max-width: 767px) {
    // Help needed here
  }

Answer 1

在768px下方，您可以将flex-direction: column分配给父元素。子元素将延伸到100% width。

＆＃13;

.charts {
  display: flex;
  flex: 1;
}
.chart.longer {
  flex: 1;
  background: tomato;
}
.chart.short {
  flex: 0 0 200px;
  background: lightblue;
}
@media only screen and (max-width: 767px) {
  .charts {
    flex-direction: column;
  }
}

＆＃13;

<div class="charts">
  <div class="chart longer">
    A
  </div>
  <div class="chart short">
    B
  </div>
</div>

＆＃13;

柔性布局流体和固定宽度

1 个答案: