[2021.03.09 - 03. 11] Flex 개념 정리

2021.03.09

공부한 자료 출처 : 1분코딩 studiomeal.com/archives/197

 

[ CSS flex 정리 ]

 

-----------------------------------------------------------

 

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

 

-----------------------------------------------------------

 

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

A. 큰 틀 설정 

    a. display: flex;

     -> flex의 첫 단계, 기본적으로 자식인 아이템들이 inline 처럼 가로배치 됨

    아이템의 width - 아이템의 내용물 만큼 width 차지

    아이템의 height - 부모인 컨테이너의 높이만큼 늘어남

 

    b. inline-flex;

     -> inline-block 처럼, 전체 넓이가 아니라 inline처럼 내용물만큼의 width를 가진 컨테이너가 되고

         아래의 요소들과 가로배치됨 

 

 

 

    * 아이템들이 배치된 방향 - 메인축 = 오뎅꼬치 

    * 메인축과 반대인 축 (수직) - 수직축 or 교차축 

 

---

 

B. 컨테이너의 방향과 / 아이템이 컨테이너 밖으로 삐져나갔을때의 설정 

 

 

• [ 컨테이너(오뎅꼬치) 방향 설정 - 메인축 설정 ]

    flex-direction: row, column, row-reverse, column-reverse

    메인축(아이템들이 배치된 방향)을 가로로? 세로로? 할건지

  

    나의 개인적인 이해 : 오뎅꼬치(컨테이너)를 어디방향으로 틀거니

 

    .container { flex-direction: row;  - 오른손잡이 기준 먹으려고 든것  ( A B C ) 
                 /* flex-direction: column; */ - 세로로 길게 든것 ( 위부터 A B C )                
                 /* flex-direction: row-reverse; */ - 왼손으로 든것  ( C B A )               
                 /* flex-direction: column-reverse; */ } - 세로로 들어 입에 넣기 전 ( 위부터 C B A )

 

 

• [ 컨테이너 안의 내용물(아이템) 들이 한줄에 담을 수 없을 때 내용물의 줄바꿈 설정 ]

      flex-wrap

.container { flex-wrap: nowrap; 
             /* flex-wrap: wrap; */ 
             /* flex-wrap: wrap-reverse; */ }

    - nowarp : 기본값 : 컨테이너 밖으로 그냥 삐져나감

    - wrap : 자연스럽게 줄바꿈 ex) float 나 inline-block  - A B C 차례대로 떨어짐 

    - wrap-reverse : 줄바꿈 되지만 역순으로 배치 (column-reverse 처럼) - 떨어지는것들이 위로 올라가서 C B A 

 

 

• [ 컨테이너의 방향과, 컨테이너안의 내용물이 빠져나갔을때의 설정을 같이 쓸수있는 설정 ]

       flex-flow

       flex-direction , flex-wrap 순으로 한칸 때고 써줌

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

 

 

---

 

 

C. 컨테이너 안의 아이템들의 정렬 설정

justify - 메인축의 방향으로 정렬 (오뎅꼬치 먹으려고 오뎅 들을 꼬치 앞뒤로 정렬하는거)

align - 수직축(오뎅을 뜯어내는) 방향으로 정렬 

 

• [ 컨테이너 안(오뎅꼬치)의 아이템(오뎅)들 메인축(앞뒤로) 방향 정렬 ]

      justify-content: flex-start / flex-end / center / space-between / space-around / space-evenly

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 

 

justify-content: flex-start - 기본값 : 아이템들을 시작점으로 정렬 (row 의 경우 왼쪽 , colume의 경우는 위쪽)

justify-content: flex-end : 아이템들을 끝점으로 정렬 (row의 경우 오른쪽, colume의 경우 아래)

justify-content: center : 아이템들을 가운데로 정렬

justify-content: space-between : 아이템들의 '사이'에 균일한 간격을 만들어줌

justify-content: space-around : 아이템들의 '둘레'에 균일한 간격을 만들어줌

justify-content: space-evenly : 아이템들의 사이와 양 끝에 균일한 간격 만들어줌(익스와 엣지 안됨)

 

 

• [ 컨테이너 안(오뎅꼬치)의 아이템(오뎅)들 수식축(위아래) 방향 ]

      align-items: stretch / flex-start / flex-end / center / baseline

.container {
	align-items: stretch; - 아이템들이 수직축 방향으로 쭈욱 늘어남 
	/* align-items: flex-start; */ - 아이템들을 시작점으로 정렬( row일 때는 위, colume일 때는 왼쪽 )
	/* align-items: flex-end; */ - 아이템들을 끝으로 정렬( row일 때는 위, colume일 때는 왼쪽 )
	/* align-items: center; */ - 아이템들을 가운데로 정렬 
	/* align-items: baseline; */ - 아이템들을 텍스트 베이스라인 기준으로 정렬 
}

 

justify-content: center;

align-items: center;

- 가운데 놓기 좋음 

 

 

• [ 컨테이너 안(오뎅꼬치)의 아이템(오뎅)들 수식축(위아래) 방향으로 배치 되어있을때 그 아이템들 정렬 ]

     flex-wrap : wrap; 이 설정된 상태에서

     align-content: stretch / flex-start / flex-end / center / space-between / space-around / space-evenly

.container {
	flex-wrap: wrap; 
	align-content: stretch; - 반반 으로 들어남 (컨테이너 높이 반반)
	/* align-content: flex-start; */ - 시작점인 왼쪽 위 배치
	/* align-content: flex-end; */ - 끝점인 왼쪽 아래 배치 
	/* align-content: center; */ - 왼쪽 가운데 배치 
	/* align-content: space-between; */ - 행 '사이' '동일한' 간격 줌 
	/* align-content: space-around; */ - 아이템들의 '둘레' '동일한' 간격 줌 
	/* align-content: space-evenly; */ - 아이템들의 사이와 양 끝에 '동일한' 간격 줌 
}

 

 

 

 

 

 

---

 

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

A. flex아이템들의 '기본'크기 설정 - row: 너비, column: 높이

• [ 기본값auto 는 내용물의 크기만큼 but flex-basis는 제일 기본적인 크기를 설정해줌 ]

     flex-basis : auto(기본값) / 0; / 50%; / 300px; / 10rem; / content;

 

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

.item {
	flex-basis: 100px;
}

100px 이 안되던 아이템도 100px로 늘어나고,

원래 100px보다 큰 아이템은 자기가 원래 가지고있던 내용물의 크기 그대로 유지

 

다 100px 하고 싶으면 width: 100px하면 된다.

 

 

B. flex-basis보다 커질수 있는지 '결정'하는 속성

• [ 그냥 flex의 아이템은 자기의 내용물의 크기 or flex basis로 정한 크기 / flex-grow를 쓰면 내용물 늘어나 빈공간 채움 ]

      flex-grow: 0;(flex-basis 보다 안늘어나는 기본상태-기본값) / 1;(flex-basis보다 늘어나게 하는것)

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

 

• [ 비율로 각자의 아이템에 넣을경우 flex-basis를 제외한 여백부분을 그 비율로 나누어 가짐 ]

/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

 

 

C. flex-basis보다 작아질 수 있는지 '결정'하는 속성

• [ flex-grow가 기본설정보다 늘어날수있게 설정하는거라면 flex-shrink는 작아질수있게 설정 ]

      flex-shrink: 0;(flex-basis보다 안줄어듬) / 1;(flex-basis보다 줄어듬-기본값) 

 -> 즉 flex아이템들은 기본적으로 '기본설정' 보다 안늘어나지만, '기본설정'보다 줄어들면 줄어듬 

 

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

flex-shrink를 0(No)으로 설정하면 flex-basis보다 안줄어듬 

 

D. flex-grow, flex-shrink, flex-basis 한번에 쓰는 축약형 속성

• [ ex. 늘어나게 할거니? - 1 , 줄어들게 할거니? - 1, 크기설정 ]

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

flex : 1; - flex-basis를 생략해서 쓰면 flex-basis의 값은 0

 

그다음 

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

1 / 2 / 1 의 비율로 크기가 정확하게 떨어짐(basis를 제외한 여백의비X)

 

E. 아이템들을 '각각' 수직축으로 정렬하는 속성

align-items 는 아이템들 전체가 움직임

align-self 는 해당 각각의 아이템들이 움직일수있음

 

 

align-self: auto; / stretch; / flex-start; /  flex-end; / center; / baseline; 

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
}

기본적으로는 align-items의 속성을 상속받지만(부모의 속성이기때문에)

align-self는 align-items보다 우선권이 있음 - 개별설정 우선 

 

 

 

F. 배치 순서 결정하는 속성

시각적 나열을 결정 - html자체의 구조 바꾸는것은 아니다.

.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */

-> B C A 

 

G. Z축 결정하는 속성

z-index로 z축 정렬을 할 수 있음. 숫자가 클 수록 위로 올라온다.

(position에서의 z-index와 동일)

.item:nth-child(2) {
	z-index: 1;
	transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */