Hi

(css) order 본문

WEB(웹)

(css) order

SharingWorld 2018. 5. 29. 10:16

플렉스 항목의 배치 순서 바꾸기


order: 0 | 숫자


0이면 소스에 입력한 순서대로 배치.

숫자로 하면 그 순서에 따라 배치.


    <style>
      #container {
         width:500px;
         height:300px;
         margin:0 auto;
         display:flex;
         border:2px solid black;
      }  
      #container div {
         width:200px;
         border: 2px solid black;
         background:#ccc;
      }
      #box1 {
         order:2;
      }
      #box2 {
         order:3;
      }
      #box3 {
         order:1;
      }
   </style>
</head>
<body>
   <div id="container">
      <div id="box1"><h2>box1</h2></div>
      <div id="box2"><h2>box2</h2></div>
      <div id="box3"><h2>box3</h2></div>
   </div>
</body>


'WEB(웹)' 카테고리의 다른 글

bem  (0) 2018.05.29
flex  (0) 2018.05.29
(css) flex-flow  (0) 2018.05.29
(css) flex-wrap  (0) 2018.05.29
(css) flex-direction  (0) 2018.05.29
'WEB(웹)' Related Articles more