4_CSS_Flexbox

charlie_·2021년 6월 2일

목록 보기

4/42

flexbox는 container와 item으로 레이아웃을 구성하고, containe에 적용하는 property와 item에 적용하는 property가 다르다.

오늘은 container에 적용하는 property중에
1) flex-direction
2) justify-content
3) align-items까지만 알아보자.

0. flexbox를 사용해 레이아웃을 설정한 예

<style>
        body {
            box-sizing: content-box;
        }
        #container {
            display: flex;
            flex-wrap: wrap;
        }
        .header, .nav, .section, .footer  {
            border: 1px solid black;
            padding: 5px;
            margin: 5px;
        }
        .header {
            width: 377px;
        }
        .nav {
            width: 100px;
        }
        .section {
            width: 255px;
            display: flex;
            flex-direction: column;
        }
        #human, #animal {
            border: 1px solid black;
            margin: 5px 0px 5px 0px;
            height: 130px;
            padding: 10px;
        }
</style>
<body>
    <div id="container">
        <div class="header">Header</div>
        <div class="nav">
            <li>Nav</li>  
            <li>갤러리</li>
            <li>TMI</li>
            <li>contact</li>
        </div>
        <div class="section">Section
            <article id="human">사람</article>
            <article id="animal">동물</article>
        </div>
        <div class="footer">footer - content길이만큼 늘어나는 flexbox</div>
    </div>
</body>

1. Flex-direction

<style>
    #container1 {
        display: flex;
        background-color: rgb(245 245 240);
        border: 1px solid black;
    } 
</style>
<body>
  <div id="container1"> 
    <div class="item1">1번 item</div>
    <div class="item1">2번 item</div>
    <div class="item1">3번 item</div>
  </div>
</body>

item의 width는 content의 width와 동일하고
item의 height는 container의 height와 동일하다.

2) row-reverse

<style>
  #container2 {
    display: flex;
    flex-direction: row-reverse;
  }
</style>
<body>
  <div id="container2">
    <div class="item1">1번 item</div>
    <div class="item1">2번 item</div>
    <div class="item1">3번 item</div>
  </div>
</body>

3) column

<style>
  #container3 {
    dispaly: flex;
    flex-direction: column;   
  }
</style>
<body>
  <h5>3) column</h5>
  <div id="container3">
    <div class="item1">1번 item</div>
    <div class="item1">2번 item</div>
    <div class="item1">3번 item</div>
  </div>
</body>

4) column-reverse

<style>
  #container4 {
    dispaly: flex;
    flex-direction: column-reverse;
  }
</style>
<body>
  <h5>4) column-reverse</h5>
  <div id="container4">
    <div class="item1">1번 item</div>
    <div class="item1">2번 item</div>
    <div class="item1">3번 item</div>
  </div>
</body>

2. justify-content

<style>
    #container5 {
    justify-content: flex-start;
    }
    #container6 {
    justify-content: flex-end;
    }
    #container7 { 
    justify-content: center;
    }
    #container8 { 
    justify-content: space-between;
    }
    #container9 { 
    justify-content: space-around;
    }
    #container10 { 
    justify-content: space-evenly;
    }
</style>

3. aling-items

<style>
  #container11 {
    flex-direction: column 
    align-items: flex-start;
  }
  #container12 {
    flex-direction: column;
    align-items: flex-end;
  }
  #container13 {
    flex-direction: column;
    align-items: center;
  }  
</style>

charlie_

매일 하루에 딱 한 걸음만

이전 포스트

3_HTML&CSS

다음 포스트