I want to use flexbox to arrange 10 buttons in a row on a large screen. On a medium screen, I'd like 5 buttons on the first row and 5 on the second row. For small screens, 2 buttons per row, and for very small screens, one button per row. It's important that the total number of buttons displayed is always a multiple of 10.
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>