css - 如何在第一行中对齐X项目并在Flexbox中对齐下一行的X项目？ - Thinbug

如何在第一行中对齐X项目并在Flexbox中对齐下一行的X项目？

时间：2017-09-12 09:45:15

标签： css web flexbox

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

当我在中间屏幕上时，第一行有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>

1 个答案:

答案 0 :(得分：1)

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

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