CSS 2일차(3)

flex 레이아웃

웹페이지 레이아웃을 효율적으로 구성하기 위한 기술, flexbox를 사용하면
요소들을 부모요소 기준으로 유연하게 정렬하고 배치할 수 있다.

정렬을 위한 부모 컨테이너

• display : flex -> 해당요소를 flex컨테이너로 사용하겠다.
• flex-direction : row | column -> 정렬을 위한 주축을 행(가로)/열(세로) 지정
• justify-content : flex-center | flex-end | center | space-between | space- around... 
                              -> 주축의 정렬을 어떻게 할 것인가
• align-itme : flex-center | flex-end | center | space-between | space-around...
                          -> 교차축의 정렬을 어떻게 할 것인가
• gap : px단위로 입력 -> 아이템 간의 간격을 어떻게 할 것인가
• flex-wrap : nowrap | wrap -> 줄 바꿈 여부(공간부족시 줄 넘김)

 

정렬을 위한 내부 아이템

• flex : 2 1 100px 비율 수축 기본크기
• flex-grow: 비율;
• flex-shrink: 수축;
• flex-basis: 기본크기;
• order : 보이는 순서 우선도;

<style>
    .container{
        border: 3px solid black;
        height: 200px;
        display: flex;
        /* flex-direction: row; 가로기준으로 아이템들을 정렬하겠다 -> 기본값 */
        /* flex-direction: column; 세로기준 */
        justify-content: center;
        align-items: center;
        gap: 12px;
    }

    .flex-item{
        font-size: 24px;
        padding: 24px;
        text-align: center;
        border: 1px solid red;
        width: 100px;
        height: 50px;
        flex: 1;
    }

    .container2{
        height: 500px;
        border: 1px solid black;
        display: flex;
        flex-direction: row; /*주축 : 가로*/
        gap: 10px;
        align-items: center; /*교차축 정렬*/
        flex-wrap: wrap;
    }

    .flex-item2{
        font-size: 24px;
        padding: 12px;
        text-align: center;
        border: 1px solid red;
        width: 100px;
    }
</style>
<div class="container">
    <div class="flex-item item1">1번</div>
    <div class="flex-item item2" style="flex: 2;">2번</div>
    <div class="flex-item item3">3번</div>
</div>

<br><br>

<div class="container2">
    <div class="flex-item2">1번</div>
    <div class="flex-item2">2번</div>
    <div class="flex-item2">3번</div>
    <div class="flex-item2">4번</div>
    <div class="flex-item2">5번</div>
</div>

1번

2번

3번

1번

2번

3번

4번

5번