css 배치 - 가로,세로

css 레이아웃을 설정할때에 css 3 이전에는 float 과 같은 방법을 이용해서 가로로 배치했지만 css 3 이후로 부터는 display 의 flex 라는 속성값을 이용해 레이아웃을 가로로 배치할수있게 되었다. 기본배치 값은 block으로 원래처럼 세로로 배치되면 flex 라는 속성을 주면 가로로 배치된다.

block 속성

ex.html

<section id=block>
        <div>
        </div>
        <div>
        </div>
    </section>

ex.css

 #block
        {
            display: block;
        }
        #block>:nth-child(1)
        {
            background-color: green;
            width: 50px;
            height: 50px;
        }
        #block>:nth-child(2)
        {
            background-color: red;
            width: 50px;
            height: 50px;
        }    

결과

flex 속성

ex.html

<section id=block>
        <div>
        </div>
        <div>
        </div>
    </section>

ex.css

 #block
        {
            display: flex;  
        }
        #block>:nth-child(1)
        {
            background-color: green;
            width: 50px;
            height: 50px;
        }
        #block>:nth-child(2)
        {
            background-color: red;
            width: 50px;
            height: 50px;
        }    

결과