Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> CSS

सीएसएस आदेश संपत्ति

<घंटा/>

फ्लेक्स आइटम का क्रम सेट करने के लिए ऑर्डर प्रॉपर्टी का उपयोग करें

आप CSS ऑर्डर प्रॉपर्टी को लागू करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं -

उदाहरण

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
            align-content: space-between;
            height: 150px;
            width: 600px;
            flex-wrap: wrap;
         }
         .mycontainer > div {
            background-color: white;
            text-align: center;
            line-height: 40px;
            font-size: 25px;
            width: 100px;
            margin: 5px;
         }
      </style>
   </head>
   <body>
      <h1>Quiz</h1>
       <div class = "mycontainer">
         <div style = "order: 8">Q1</div>
         <div style = "order: 6">Q2</div>
         <div style = "order: 2">Q3</div>
         <div style = "order: 1">Q4</div>
         <div style = "order: 7">Q5</div>
         <div style = "order: 4">Q6</div>
         <div style = "order: 3">Q7</div>
         <div style = "order: 5">Q8</div>
      </div>
   </body>
</html>

  1. चेतन सीएसएस फ्लेक्स-सिकुड़ संपत्ति

    पर एनिमेशन लागू करने के लिए फ्लेक्स सिकोड़ें सीएसएस के साथ संपत्ति, आप निम्न कोड को चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {          

  1. चेतन सीएसएस आदेश संपत्ति

    CSS के साथ ऑर्डर प्रॉपर्टी पर एनिमेशन लागू करने के लिए, आप निम्न कोड को चलाने का प्रयास कर सकते हैं उदाहरण <!DOCTYPE html> <html>    <head>       <style>          #demo1 {             width: 600px

  1. सीएसएस अलगाव संपत्ति

    आइसोलेशन प्रॉपर्टी का उपयोग यह परिभाषित करने के लिए किया जाता है कि क्या किसी तत्व को एक नई स्टैकिंग सामग्री बनानी चाहिए। वाक्य रचना इस प्रकार है - सिंटैक्स isolation: auto|isolate|initial|inherit; उदाहरण <!DOCTYPE html> <html> <head> <style> .demo1 {    background-