यदि संभव हो तो मैं फ्लेक्सबॉक्स के साथ चाहता हूं जब मैं एक बड़ी स्क्रीन पर एक पंक्ति में 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
B.Denis 12 सितंबर 2017, 12:45
आप इसके लिए media queries का उपयोग कर सकते हैं...
 – 
kukkuz
12 सितंबर 2017, 12:55
आप बूटस्ट्रैप के कॉलम सिस्टम का भी उपयोग कर सकते हैं
 – 
Valdrinium
12 सितंबर 2017, 12:56
नहीं, फ्लेक्सबॉक्स ऐसा नहीं कर सकता...यह ग्रिड सिस्टम नहीं है। इसमें पंक्ति लपेटने पर वस्तुओं को संरेखित करने का कोई तरीका नहीं है। सीएसएस ग्रिड हालांकि ऐसा कर सकता है..लेकिन आपको अभी भी मीडिया प्रश्नों की आवश्यकता होगी
 – 
Paulie_D
12 सितंबर 2017, 13:35

1 उत्तर

सबसे बढ़िया उत्तर

आप media queries का उपयोग कर सकते हैं आप बड़ी स्क्रीन में 10 बटन प्रदर्शित करने के लिए इन कोड को जोड़ सकते हैं

            @media (min-width: 1200px){
                input[type="submit"] {
                  width:122px;
                  float: left;
                  font-size: 12px !important;
                  padding: 1em 1em;
                }
            }
1
Rakesh Raj 12 सितंबर 2017, 13:01
ठीक है thx मैं बहुत बेवकूफ हूँ यकीन है कि मैं मीडिया के प्रश्नों के साथ कर सकता हूँ, वास्तव में आपके उदाहरण के लिए thx मुझे इसकी आवश्यकता है। मैं इसे अभी आज़माता हूँ
 – 
B.Denis
12 सितंबर 2017, 13:56
मीडिया प्रश्नों ने मेरी समस्या को ठीक कर दिया। इसलिए फ्लेक्सबॉक्स के लिए कोई समाधान नहीं है क्योंकि यह ग्रिड सिस्टम नहीं है, मुझे मीडिया प्रश्नों का उपयोग करने के लिए मजबूर होना पड़ता है।
 – 
B.Denis
12 सितंबर 2017, 14:05