코드스테이츠 3주차 / CSS (Flexbox)

✏️Achievement Goals / CSS

✅Flexbox를 이용해 레이아웃을 만들 수 있다.

(다음 속성에 대한 이해가 있어야 합니다)
방향: flex-direction
얼마나 늘릴 것인가?: flex-grow
얼마만큼의 크기를 갖는가?: flex-basis
수평 정렬: justify-content
수직 정렬: align-items

📝summary

레이아웃 리셋

HTML 문서는 기본적인 스타일을 가지고 있고 그 스타일이
레이아웃을 잡는 데 방해가 되기도 한다
박스를 (0,0)의 위치에서 시작하고 싶은데,
<body> 태그가 가진 기본 스타일에 약간의 여백이 있다
width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있다
몇 줄의 코드를 적용하면 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flex(플렉스)란?

Flexible Box, Flexbox라고 부르기도 한다
Flex는 레이아웃 배치 전용 기능으로 만들어 졌기 때문에
레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나
inline-block 등을 이용한 기존 방식보다 좋은 기능들이 많다

<div class="container">
	<div class="item">Flex Item</div>
	<div class="item">Flex Item</div>
	<div class="item">Flex Item</div>
</div>

Flex Container(플렉스 컨테이너) : 부모 요소 div.container
Flex Item(플렉스 아이템) : 자식 요소 div.item

flex의 속성

컨테이너에 적용하는 속성, 아이템에 적용하는 속성 두가지로 나뉜다

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

1)display: flex : 자식 박스의 방향과 크기 결정

.container {
	display: flex;
}

자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법이고
기본값으로, display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치되고
자신이 가진 내용물의 width 만큼만 차지한다 inline 요소들 처럼 그리고
height는 컨테이너의 높이만큼 늘어난다

2)flex-direction : Flex 요소에 방향 지정하기

.container {
	flex-direction: row; // 왼쪽부터 오른쪽으로 정렬
	flex-direction: column; // 세로로 정렬
	flex-direction: row-reverse; // 오른쪽부터 왼쪽으로 정렬
	flex-direction: column-reverse; // 밑부터 위로 정렬
}

2. Flex 아이템에 적용하는 속성

자식 박스에 어떠한 속성도 주지 않으면,
왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치되고
자식 요소의 flex 속성을 추가하지 않으면, 기본값이 적용된다

flex: 0 1 auto;
flex: <grow> <shrink> <basis>
//grow(팽창 지수), shrink(수축 지수), basis(기본 크기)

1) flex-basis : Flex 아이템의 기본 크기 설정
자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기 flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지된다

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

2) flex-grow : flex-basis의 값보다 커질 수 있는지를 결정, 숫자값을 쓴다
0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메운다
flex-grow 속성에 적용하는 값은 비율을 의미한다

.item {
	flex-grow: 1;
	//flex-grow: 0; 기본값
}

첫번째 자식클래스에 flex-grow 속성의 값을 1로 설정하면
첫 번째 자식박스는 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어난다

나머지 속성들에도 flex-grow 속성의 값을 1로 설정해주면 모든 박스가 늘어나기
때문에 모든 박스가 동일한 비율의 가로길이를 갖게된다

3) flex-shrink : flex-basis의 값보다 작아질 수 있는지를 결정, 숫자값을 쓴다
0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메운다

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
	기본값이 1이기 때문에 따로 세팅하지 않았어도 
    아이템이 flex-basis보다 작아질 수 있다
}

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다
작아지지 않기 때문에 고정된 폭으로 만들기 쉽다 고정 크기는 width로 설정한다

align-items : 수직으로 아이템 정렬

.item {
	align-items: auto;
	align-items: stretch; // 컨테이너에 맞게 늘림
	align-items: flex-start; // 최상단으로 정렬
	align-items: flex-end; // 최하단으로 정렬
	align-items: center; // 중앙으로 정렬
	align-items: baseline; // 컨테이너의 시작위치에 정렬
}

justify-content : 수평으로 아이템 정렬

.item {
	justify-content: flex-start //왼쪽으로 정렬
	justify-content: flex-end //오른쪽으로 정렬
	justify-content: center // 중앙정렬
	justify-content: space-between //요소들 사이에 동일간격둠
}

Author And Source

이 문제에 관하여(코드스테이츠 3주차 / CSS (Flexbox)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@support/코드스테이츠-3주차-CSS-Flexbox

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)