Flexbox定义列的宽度并向左对齐

Question

我正在使用flexbox来创建宽度相等的列。我将flex设置为flex：1 1 200px;在每个项目上。当每行中的项目数不相等时，行中项目数量较少的项目将散布以填充空间（下图中的测试7和测试8）。

在上图中，我希望test7项仅填充test 1行的空间，并且我希望test 8列仅填充test2列的空间。

<!-- "Gradle Test" entry in the "Run as... " context menu -->

cd /Applications/eclipse-jee-photon-R-macosx-cocoa-x86_64/Eclipse.app/Contents/MacOS
/.eclipse -clean

这是一个codepen：https://codepen.io/jesouhaite08/pen/ajooYq

Answer 1

解决此问题的最简单方法是给.eq元素中的max-width中的200px。可以将其应用于所有.eq元素（如下所示），也可以通过添加其他类专门应用于元素7和8。

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: sans-serif;
  line-height: 1.4;
}

.eqWrap {
  display: flex;
  flex-wrap: wrap;
}

.eq {
  padding: 10px;
  max-width:200px;
}

.eq:nth-of-type(odd) {
  background: yellow;
}

.eq:nth-of-type(even) {
  background: lightblue;
}

.equalHW {
  flex: 1 1 200px;
}

<div class="equalHWrap eqWrap">
  <div class="equalHW eq">test1</div>
  <div class="equalHW eq">test2</div>
  <div class="equalHW eq">test3</div>
  <div class="equalHW eq">test4</div>
  <div class="equalHW eq">test5</div>
  <div class="equalHW eq">test6</div>
  <div class="equalHW eq">test7</div>
  <div class="equalHW eq">test8</div>
</div>

Answer 2

供您参考。 如果要固定设置的宽度，请将0设置为flex-grow和flex-shrink，例如flex：0 0 200px;。