[CSS] flexbox

Recorder_H·2022년 4월 28일

#내가 보려고 만든 페이지 😂

목록 보기

2/4

flexbox 박스 & 아이템들을 행/열로 배열

부모요소 container, 자식요소 item
중심축(main axis), 교차축(cross axis)


<style>
   

.container { 
    padding-top: 100px;
    background:beige;
    height: 100vh;  /* 부모에 상관없이 아이템을 보이는 뷰폴트 height 100% 다 쓰겠다 */
    display: flex;  /* 너 이제부터 flexbox야!(아이템이 왼쪽→오른쪽 가로방향으로 정렬) 
    자신이 가진 내용물의 width만큼만 차지, height는 컨테이너 높이만큼 늘어남. */

    /* flex-direction: row;  //기본값(중심축은 수평,열,X축). 왼쪽→오른쪽 행(가로)방향 ex)123 */
    /* flex-direction: row-reverse;  //오른쪽→왼쪽방향 역순으로 가로배치 ex)321 */
    /* flex-direction: column;  //위→아래, 열(세로)방향(중심축은 수직,행,y축) */
    /* flex-direction: column-reverse;  //아래→위 방향, 역순으로 세로배치 */

    /* flex-wrap: nowrap;  //기본값. 아이템들이 많아져도 한줄에 빼곡하게 붙어보임 */
    /* flex-wrap: wrap;  //아이템들이 한줄에 꽉차면 다음 라인으로 자동 넘어감 */
    /* flex-wrap: wrap-reverse;  //위에서부터 반대로 */

    /* flex-flow: column nowrap; //flex-direction + flex-wrap */

    /* "justify" 메인축 방향으로 정렬, "align" 수직축 방향으로 정렬 */
    /* justify-content: flex-start;  //기본값. 아이템들을 시작점으로 정렬, "flex-direction" row(가로배치)일 때는 왼쪽, column(세로 배치)일 때는 위. */
    /* justify-content: flex-end;  //아이템 순서는 유지, "flex-direction" row(가로배치)일 때는 오른쪽, column(세로 배치)일 때는 아래. */
    /* justify-content: center;  //아이템 가운데 정렬. */
    /* justify-content: space-around;  //아이템들의 "둘레"에 균일한 간격을 만들어줌 */
    /* justify-content: space-evenly;  //아이템들의 사이와 양 끝에 균일한 간격으로 만들어줌 */
    /* justify-content: space-between;  //아이템들의 "사이"에 균일한 간격을 만들어줌 */

    /* align-items: baseline;  //아이템들을 텍스트 베이스라인 기준으로 정렬 */
    /* align-items: center;  //아이템 가운데 정렬 */

    /* align-content: center;  //아이템들의 행이 2줄 이상 되었을 때 수직축 방향 정렬 */
}

.item {
    width: 40px;
    height: 40px;
    border: 1px solid black;
}

/* 색조합 및 색코드 참고 Material Design Color Tool:https://material.io/resources/color/# */
.item1 {
    background-color: #ef9a9a;
    /* order: 2;  //아이템들의 "시각적" 나열순서 결정속성, 현업에서 잘 쓰이진 않는다. */
    /* flex-grow: 2;  //기본값 0, 0보다 큰 값이 세팅되면 원래의 크기보다 커지며 빈 공간을 메우게 됨. (item2,3보다 2배로 넓어짐) */
    /* flex-shrink: 2; //기본값 1, 0보다 큰 값이 세팅되면 flex-basis보다 작아짐. (item2,3보다 2배로 작아짐) */
    flex-basis: 60%;  /* 기본값 auto, 아이템들이 공간을 얼마나 차지하는지 세부적으로 적용 */
    align-self: center;  /* 아이템별로 정렬가능. */
}

.item2 {
    background-color: #f48fb1;
    /* flex-grow: 1;
    flex-shrink: 1; */
    flex-basis: 30%;
}

.item3 {
    background-color: #ce93d8;
    /* flex-grow: 1;
    flex-shrink: 1; */
    flex-basis: 10%;
}
/*
.item4 {background-color: #b39ddb;}
.item5 {background-color: #90caf9;}
.item6 {background-color: #a5d6a7;}
.item7 {background-color: #e6ee9c;}
.item8 {background-color: #fff59d;}
.item9 {background-color: #ffcc80;}
.item10 {background-color: #ffab91;}
 */
</style>

<body>
    <!-- div.container>div.item.item${$}*10 + TEP -->
    <div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <!-- <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div> -->
    </div>


</body>
<!-- Flexbox Froggy 게임: https://flexboxfroggy.com/ -->
</html>