1분 코딩 FlexBox

KHW·2021년 6월 29일

목록 보기

2/16

display : flex

자식태그에 적용하기 위해서 부모태그에서 style로 적용시킨다.

기본코드

<html>
    <head>
    </head>
<style>
    *{
        margin:0;
        padding:0;
        border:0;
    }
    .container{
        height:100vh;
        background:lightgray;
    }
    .item{
        background:rgba(255,0,0,0.5);
    }
    .item:nth-child(odd){
        background:rgba(255,255,0,0.5);    
    }
</style>
<body>
    <div class="container">
        <div class="item">
            <p>AAAAAAAAAAA</p>
            <p>AAAAAAAAAAA</p>
            <p>AAAAAAAAAAA</p>
        </div>
        <div class="item">
            <p>BBBBBBBBBBBBBB</p>
        </div>
        <div class="item">
            <p>CCC</p>
        </div>
</body>
</html>

display : flex 적용

알아서 크기만큼 늘어난다.

<div class="container">
	<div class="item">helloflex</div>
	<div class="item">abc</div>
	<div class="item">helloflex</div>
</div>

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고,
자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다.
“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”

1. Flex 컨테이너에 적용하는 속성들

flex-direction

아이템들이 배치되는 축의 방향을 결정

flex-direction: row; //기차 (기본 값)

flex-direction: column; //스택

flex-direction: row-reverse; //기차를 반대로 차례로

flex-direction: column-reverse; //스택을 반대로 차례로

flex-wrap

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때
아이템 줄바꿈을 어떻게 할지 결정하는 속성

1.flex-wrap: nowrap; (기본)
//줄바꿈을 하지 않습니다. 넘치면 그냥 삐져 나간다.
2. flex-wrap: wrap;
//줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작
3. flex-wrap: wrap-reverse;
//줄바꿈을 하는데, 아이템을 역순으로 배치

justify / align (정렬)

“justify”는 메인축(오뎅꼬치) 방향으로 정렬
“align”은 수직축(오뎅을 뜯어내는) 방향으로 정렬

justify-content

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

align-items

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

이를 통해 justfy / align 을 center로 하면 가운데 정렬이 진행된다.

Flex 아이템에 적용하는 속성들

flex-grow

아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다 (여백의 비)

flex-basic

flex-basis는 Flex 아이템의 기본 크기를 설정

flex-grow를 통해 비율을 설정하고
그 비율을 flex-basic : auto (기본값)이면 진짜 여백인 width만 비율로써 처리하고
flex-basic : 0 (원래 점유하는 공간을 0으로 한다.)이면
전체 텍스트 영역까지 비율로써 처리한다.

flex-basic을 사용하지않고 flex : 비율로 진행해도 같은 결과가 나타난다.