灵活布局流体和固定宽度答案

【问题标题】：Flex Layout Fluid and Fixed Width灵活布局流体和固定宽度
【发布时间】：2015-08-26 06:00:03
【问题描述】：

我偶然发现了 flex，我正在尝试创建这样的布局。

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

我将有一个flex div，它将保持流畅，fixed width div 将保持 200 像素。

我用过下面的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
  }

【问题讨论】：

标签： css less flexbox

【解决方案1】：

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

.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;
  }
}

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

【讨论】：