[CSS] flex 기본

6358 단어 CSSCSS 
<!DOCTYPE html>
<html>
    <head>
        <style>
            .container{
                background-color: powderblue;
                height: 100px;
                display: flex;
                flex-direction: row-reverse;
            }
            .item{
                background-color: tomato;
                color: white;
                border: 1px solid white;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

  • flex는 부모 자식이 있어야 적용이 된다.
  • 위 예제에서는 .container가 부모 .item이 자식으로 되어있다.
  • .container{에 display값이 flex로 되어있어야 한다.
  • 정렬 방향을 flex-direction:을 통해 변경할 수 있으며, 기본 값으로 row이다.
구간 dp 테마 연습
Uva 437 바빌론 탑 & & UVA10003

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage