如何在Flexbox中將第一行的X項目與第二行的X項目對齊？

我只想用flexbox，如果可能的話，當我在一個大屏幕上10行上的按鈕。如何在Flexbox中將第一行的X項目與第二行的X項目對齊？

當我在中間屏幕上時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>

來源

2017-09-12 B.Denis

您可以用'媒體queries'這個... – kukkuz

你可以不要使用引導程序的列系統 – Valdrinit

不，flexbox不能這樣做......它不是網格系統。它沒有在行換行上對齊項目的方法。雖然CSS Grid可以做到這一點，但你仍然需要媒體查詢 –

你可以使用media queries可以添加這些代碼顯示在大屏幕上10個按鈕

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

來源

2017-09-12 10:01:50

好吧thx我是如此愚蠢確定我可以與媒體查詢，真正thx爲你的例子，我需要它。我現在試試 –

媒體查詢解決了我的問題。所以沒有flexbox的解決方案，因爲它不是一個網格系統，我不得不使用媒體查詢thx all。 –

如何在Flexbox中將第一行的X項目與第二行的X項目對齊？

回答

相關問題