Hi

(css) flex-direction 본문

WEB(웹)

(css) flex-direction

SharingWorld 2018. 5. 29. 10:04

플렉스 방향 지정하기


플렉스 컨테이너를 지정했다면 플렉스 항목을 배치할 방향을 알려주어야 함.


flex-direction: row | row-inverse | column | column-inverse


    <style>
        #container {
            width: 500px;
            height: 300px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            border: 2px solid black;
        }
      #container div {
         width: 200px;
         border: 1px solid black;
         background: #ccc;
      }

   </style>

<body>
   <div id="container">
      <div id="box1"><h2>1</h2></div>
      <div id="box2"><h2>2</h2></div>
      <div id="box3"><h2>3</h2></div>
   </div>
</body>


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

(css) flex-flow  (0) 2018.05.29
(css) flex-wrap  (0) 2018.05.29
플렉서블 박스 레이아웃  (0) 2018.05.29
css 파일 html로  (0) 2018.05.28
(css) z-index  (0) 2018.05.28
'WEB(웹)' Related Articles more