如何在 flexbox 中对齐第一行的 X 项目和下一行的 X 项目？答案

【问题标题】：How can I align X item on first row and X item for the next row in flexbox?如何在 flexbox 中对齐第一行的 X 项目和下一行的 X 项目？
【发布时间】：2018-02-20 17:20:59
【问题描述】：

如果可能的话，我只想在大屏幕上连续使用 10 个按钮时使用 flexbox。

当我在中间屏幕上时，第一行有 5 个按钮，第二行有 5 个。当我在一个小屏幕上时，每行 2 个按钮。当我在一个很小的屏幕上时，每行 1 个按钮。

所以我只想要 10 的倍数，因为我有 10 个按钮，但我不想要第一行有 8 个按钮，第二行有 2 个按钮。

body,
html {
  margin: 0;
  background: whitesmoke;
}

h1 {
  text-align: center;
  font-family: cursive;
}

#content {
  margin: 2px;
}

.toolbar>div {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#contain {
  background: #EEEEEE;
  overflow-y: auto;
}

#marginTop {
  margin-top: 15px;
}

#onglets {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

input:hover,
select:hover {
  border: 1px solid #B829fA;
}

input:focus {
  border: 1px solid #B829BA;
}

select:focus {
  border: 1px solid #B829ff;
}

input[type="submit"] {
  width: 150px;
  float: left;
  text-decoration: none;
  color: black;
  font-family: "Trebuchet MS";
  font-size: 14px;
  border-radius: 4px;
  transition: 0.25s;
  background: rgb(250, 250, 252);
  border: 1px solid #ccc;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
  cursor: pointer;
  /*box-shadow: 0px 1px 3px #ccc;*/
}

input[type="submit"]:hover {
  background: white!important;
  color: white!important;
  box-shadow: inset 0 0 0 2em #B829fA!important;
  border: 1px solid white!important;
  text-decoration: underline;
}

input[type="submit"]:focus {
  background: white;
  color: white;
  box-shadow: inset 0 0 0 2em #B829fA;
  border: 1px solid white;
}

input[type="submit"]:focusout {
  background: white;
  color: white;
  box-shadow: inset 0 0 0 100% #B829BA;
  border: 1px solid white;
}

.inputContent {
  min-height: 19px;
}

.contents {
  visibility: hidden;
  display: none;
}

.border {
  border: 1px solid #ccc;
  padding: 1px;
  padding-left: 3px;
  padding-right: 3px;
  margin: 2px;
}

.block {
  padding: 5px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  margin-right: 15px;
  box-shadow: /*inset*/
  0px 1px 3px #ccc;
  border-radius: 4px;
  background: rgb(250, 250, 252);
  width: 100%;
  box-sizing: border-box;
}

.block:hover {
  border: 1px solid #B829FA;
}

.data,
.divValue {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1px;
  padding-top: 1px;
  flex-wrap: nowrap;
  width: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.subcontainer {
  display: flex;
  flex-direction: column;
  height: auto;
  width: 400px;
  justify-content: flex-start;
}

.spanCenter {
  display: flex;
  justify-content: flex-start;
  color: #B829BA;
  text-decoration: bold;
  padding-bottom: 5px;
  padding-top: 5px;
  margin-bottom: 5px;
}

.widthContain {
  width: 196px;
}

<!DOCTYPE html>
<html>

<body>
  <div id="onglets">
    <!--Menu-->
    <input id="inputGeneral" class="buttonMenu" type="submit" value="General">
    <input id="inputConditionement" class="buttonMenu" type="submit" value="Conditionement">
    <input id="inputMesure" class="buttonMenu" type="submit" value="Mesure">
    <input id="inputMat" class="buttonMenu" type="submit" value="Mat. Dangereuse">
    <input id="inputAlgorithme" class="buttonMenu" type="submit" value="Algorithme">
    <input id="inputPicking" class="buttonMenu" type="submit" value="Picking">
    <input id="inputCode" class="buttonMenu" type="submit" value="Code Barre">
    <input id="inputImage" class="buttonMenu" type="submit" value="Image">
    <input id="inputInventaire" class="buttonMenu" type="submit" value="Inventaire Tournant">
    <input id="inputChamps" class="buttonMenu" type="submit" value="Champs Libres">
  </div>
</body>

</html>

【问题讨论】：

你可以使用media queries来实现这个...
你也可以使用bootstrap的列系统
不，flexbox 做不到……它不是网格系统。它没有在换行时对齐项目的方法。 CSS Grid 可以做到这一点..但你仍然需要媒体查询

标签： css web flexbox

【解决方案1】：

你可以使用media queries你可以添加这些代码在大屏幕上显示10个按钮

            @media (min-width: 1200px){
                input[type="submit"] {
                  width:122px;
                  float: left;
                  font-size: 12px !important;
                  padding: 1em 1em;
                }
            }

【讨论】：

好吧，我太傻了，确定我可以用媒体查询，真的谢谢你的例子我需要它。我现在试试这个
媒体查询解决了我的问题。因此 flexbox 没有解决方案，因为它不是网格系统，我不得不全部使用媒体查询。