인프런 : 비전공자를 위한 올인원 개발 클래스 flex layout

오늘도_화이팅 2022. 10. 19. 17:04

2022. 10. 19. 17:04

FLEX 레이아웃 익히기

기존에 DIV 요소는 줄바꿈이 되어 수직으로 배치가 되는데, 수평적으로 배치한다.
자식을 부모 기준 가운데 정렬을 한다

위 예시와 같이 요소들을 마음대로 배치하기 위해서 옛날에는 float 과 display 속성(table, inline-block) 등을 사용했습니다.

그러나 요새는 레이아웃을 쉽게 배치할 수 있는 Flex 라는 친구가 대세가 되었습니다.

우리가 앞으로 배울 웹, 앱에서는 대부분의 요소를 Flex로 배치할 것이므로 정말 중요할 것이다.

만약 비주얼스튜디오가 잘 작동하지 않는다면

JS Bin

Sample of the bin:

jsbin.com

이곳에 들어가면 프로그램 없이 학습할 수 있습니다.

1. Flex 기본

Flex의 핵심은 Container와 Item입니다. Container(부모)의 첫째 자식이 되는 Item들을 Flex를 통해서 쉽게 정렬할 수 있습니다.

(설명 잘 해주는 링크 : https://heropy.blog/2018/11/24/css-flexible-box/)

기본 코드

<html>
    <head>
        <style>
            .parent {
                background-color: aqua;
            }

            .child {
                width: 100px;
                height: 100px;
                background-color: blue;
								margin-right: 8px;
            }
        </style>
    </head>

    <body>
        <div class="parent">
            <div class="child">
                자식
            </div>
            <div class="child">
                자식
            </div>
            <div class="child">
                자식
            </div>
				</div>
    </body>

</html>

2. 컨테이너(부모) 속성

flex-direction을 통해 기준선을 설정합니다. row는 수평으로, column은 수직으로 정렬합니다.

.parent {
	display: flex;
	**flex-direciton: column;** 
}

justify-content

아이템 정렬 방향(by flex-direction)과 같은 방향으로 아이템의 여백을 관리할 때 설정합니다.

flex-direciton이 row이면 수평으로, flex-direction이 column이면 수직으로 배치됩니다.

기본 값은 flex-start 입니다.

.parent {
	display: flex;
	**justify-content: center;**
}

align-items(수직 방향으로 관리)

아이템 정렬 방향(by flex-direction)과 수직 방향으로 아이템의 여백을 관리할 때 설정합니다.

flex-direciton이 row이면 수직으로, flex-direction이 column이면 수평으로 배치됩니다.

기본 값은 stretch 입니다.

.parent {
	display: flex;
	**align-items: flex-start;** 
}

flex-wrap

아이템이 컨테이너를 넘어섰을 때 어떻게 처리할 것인지 설정합니다. 기본 값은 nowrap 으로 부모의 크기(너비 or 높이)를 기준으로 자식들이 알아서 공간을 나눠서 나열됩니다. 즉 줄바꿈이 일어나지 않는 거죠.

많은 상품 아이템들을 보여줘야 할 때 flex-wrap에 wrap을 설정하면 알아서 줄바꿈이 됩니다.

.parent {
	display: flex;
	**flex-wrap: wrap; /*nowrap(기본), wrap ... */**
}

3. 아이템(자식) 속성

flex-basis

자식의 최소 너비를 설정할 때 사용합니다(수직정렬일 때는 높이가 되겠죠?)

기본 값은 auto입니다.

lex-grow

Container에 여백이 생겼을 때 아이템이 어떻게 영역을 차지할지 설정합니다. 다른 아이템들과 비교해서 해당 비율로 여백을 가져갑니다.

기본 값은 0입니다.

flex-shrink

Container가 자식들이 차지하는 공간보다 줄어들었을 때 너비를 어떤 비율로 줄일지 정합니다. 다른 아이템들과 비교해서 해당 비율로 줄어들게 됩니다.

기본 값은 1입니다

(실제로 flex-shrink는 계산이 복잡해서 많이 사용하지는 않습니다)

위 세가지 요소를 flex 라는 하나의 속성으로 요약해서 표현하곤 합니다.

flex: 증가너비 감소너비 기본너비; 
/*만약 해당 값들이 생략되면 기본 값이 적용됨*/

.child {
	flex: 1 1 20px /*증가너비 감소너비 기본너비*/
	flex: 1; /*증가너비만 적용되고 감소너비(1), 기본너비(auto)는 기본값으로 적용됨 */
	flex: 1 1; /*증가너비, 감소너비가 적용됨*/
	flex: 1 30px; /*증가너비, 기본너비가 적용됨*/
}

.child {
	flex: 1 1 20px /*증가너비 감소너비 기본너비*/
	flex: 1; /*증가너비만 적용되고 감소너비(1), 기본너비(auto)는 기본값으로 적용됨 */
	flex: 1 1; /*증가너비, 감소너비가 적용됨*/
	flex: 1 30px; /*증가너비, 기본너비가 적용됨*/
}

'코딩 > 코딩 기초' 카테고리의 다른 글

생활코딩 HTML (0)	2023.06.12
인프런 : 비전공자를 위한 올인원 개발 클래스 Javascript (0)	2022.10.19
부스트코스 (풀스텍) -1. 웹 프로그래밍 기초 (0)	2022.10.18
부스트코스 (풀스텍) - OT (0)	2022.10.18
인프런 : 비전공자를 위한 올인원 개발 클래스 CSS (0)	2022.10.08

어제보다 현명해지기