250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

커리까지

CSS 수업 - flex 2 : basic 본문

CSS

CSS 수업 - flex 2 : basic

목표는 커리 2021. 3. 18. 05:20
728x90
SMALL
<!doctype>
<html>
    <head>
        <style>
            .container{
                background-color: powderblue;
            }
            .item{
                background-color: tomato;
                color: white;
                border: 1px solid white;
            }
        </style>
    </head>
    <body>
        <div class="condatiner">
            <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>

css22

  • 부모에게 display: flex; 을 주는게 시작이다.

css23

  • flex 적용 후 달라졌다.

  • flex는 태그들을 정렬하는 방법

  • flex-direction: row 가 기본값

  • flex-direction: row-reverse; 하면 뒤바뀐다.

css24

  • flex-direction: column
  • 컬럼으로 정렬

css25

  • flex-direction: column-reverse;

css26

  • height: 300px; 를 부여하면 flex를 한 것과 안 한것의 차이가 드러난다.
  .container{
                background-color: powderblue;
                height: 300px;
                display: flex;
                flex-direction: column-reverse;
            }

css27

  • 원래 밑에쪽에 공간이 있었는데 reverse를 통해 바꾸니 순서가 바뀌었다.
728x90
LIST
저작자표시

'CSS' 카테고리의 다른 글

CSS 수업 - flex 4 : holy grail layout  (0) 2021.03.22
CSS 수업 - flex 3 : basis & grow & shrink  (0) 2021.03.19
CSS 수업 - flex 1 : intro  (0) 2021.03.17
CSS 수업 - 포지션 3 : fixed  (0) 2021.03.16
CSS 수업 - 포지션 2 : absolute  (0) 2021.03.15
'CSS' Related Articles more
Comments