CSS 3. Flex

1. 개념 정의

하나의 플렉스 아이템이 flexible box(container)가 차지하는 공간에 알맞게 맞추어 들어가기 위해 사이즈를 키우거나 줄이는 방법으로, 주로 반응형 웹에서 사용한다.
웹표준 고정 개념이 아니므로, 하위브라우저 혹은 미지원 브라우저에서는 적용이 되지 않는 경우가 발생할 수도 있다. 따라서 'bender-prefix'를 사용해서 브라우저 호환이 가능하도록 한다.

✔float과 비슷해보이지만 다르다

2. flex container

- flex item/box의 부모 요소
- 'display: flex'
flexible한 요소들이 주어진 내용물만큼의 너비를 잡아서 가로 나열됨(block요소)

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container1 {
  display: flex;
  background-color: #1e90ff;
}

.flex-container1 > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  width: 30%;
  text-align: center;
}
</style>
</head>

<div class="flex-container1">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
</div>
</body>
</html>

👉 주어진 너비를 균등하게 가져감

📌 속성 정리

(1) display: flex;
container become flexible [block]
default값

(2) display: inline-flex;
-[inline]과 [block]요소의 성격을 모두 지님

(3) flex-direction : 배치 방향 속성 설정
-row: 가로나열 (왼→오) (main-axis: 가로, cross-axis: 세로) (기본값)

-row-reverse : 역방향 가로 나열 (오→왼)

-column : 세로나열 (위→아래) (main-axis: 세로, cross-axis: 가로)

-column-reverse : 역방향 세로 나열 (아래→위)

(4) flex-wrap : flex요소들을 여러줄로 배치
-nowrap : box 일렬로 배치 (기본값)

-wrap : box를 여러줄로 배치.

-wrap-reverse : 박스를 역방향 여러줄로 배치.

(5) flex-flow: flex-direction 속성과 flex-wrap 속성을 한번에 나열
ex) flex-flow: row nowrap

(6) justify-content: flex item(box)를 부모 요소인 container의 시작점 부터 배치
주축방향으로 요소들을 다양하게 배치할 때 사용 (축의 영향 받음)
-flex-start: 자식요소를 부모요소 주축의 시작점에서부터 배치

-flex-end: 자식요소를 부모요소 주축의 끝점에서부터 배치

-center : 자식요소를 부모요소의 중앙으로 배치

-space-between : 부모 요소(flexible box)에 빈공간이 있을 때 사용.
처음과 마지막 요소는 양쪽 끝으로 나머지 동일 간격 정렬

-space-around: 부모 요소(flexible box)에 빈 공간이 있을 때 양쪽 끝에 여백을 두고 정렬

(7) align-items : 교차축(cross-axis) 방향으로 flex요소들을 배치할 때 사용
-stretch : flex요소를 확장해서 배치 (default)

-flex-start : flex요소를 교차축의 시작점에서부터 배치

-flex-end : flex요소를 교차축의 끝점에서부터 배치

-center : flex요소를 교차축의 중앙에서부터 배치

-baseline: flex요소들을 교차축의 시작점에 배치되는 flex요소의 글자 baseline에 맞춰 배치

(8) align-content: 여러줄인 flex item을 교차축의 방향(cross-axis)으로 다양하게 매치
(* (6)justify-content 의 속성값 동일)

⭐참고사항⭐ Perfect Centering
👉justify-content의 center속성 ➕ align-items의 center속성

3. flex item

📌 속성 정리

(1) align-self : 교차축 방향으로 flex요소를 개별 배치
-auto : flexible box(=container)의 align-items의 속성값을 상속받는다.
부모 박스에 적용된 속성값이 없을 경우 기본값 'stretch'적용 (default값)
-stretch, flex-start, flex-end, center, baseline은 (7)align-items와 동일하게 적용한다.

(2) flex : [flex-grow][flex-shrink][flex-basis]
-기본값 default 👉 flex: 0 1 auto

(2-1)flex-grow
-기본값 = "0"
-부모 요소(contianer)에 "여백"이 있을 경우에만 크기를 늘릴 수 있음
-속성값은 무조건 비율로 설정. 음수x
-width, flex-basis 속성값에 따라 늘어나는 크기가 변할 수 있음

(2-2)flex-shrink
-기본값 = "1"
-부모 요소(container)안의 요소 크기가 넘칠 경우 크기를 줄이는 속성
-속성값은 무조건 비율로 설정. 음수x
-width, flex-basis 속성값에 따라 줄어드는 크기가 변할 수 있음

(2-3) flex-basis
-기본값 = "auto"
❗flex요소의 기본 크기를 설정하는 속성
-width 속성에서 사용할 수 있는 모든 값 사용 가능
-flex-direction: row; 일 경우에는 'width'속성 사용
-flex-direction: column;일 경우에는 'height'속성 사용
-속성값 = "0"일 경우 flex item의 flex-grow, flex-shrink에서 설정한 비율이 그대로 적용
-속성값 ="auto"일 경우 flex item이 기본적으로 가지고 있는 크기를 기준으로 flex-grow, flex-shrink에서 설정한 비율 적용

Author And Source

이 문제에 관하여(CSS 3. Flex), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@bori9412/CSS-3.-Flex

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

CSS 3. Flex

1. 개념 정의

2. flex container

3. flex item

Author And Source

좋은 웹페이지 즐겨찾기