20.03.25(Wed) Module #3. Flexbox

.·2020년 3월 25일
1

Nomad Coder

목록 보기
4/19

3-7. Fluid layouts with Flexbox

왜 배울까?

  • 만약 내가 많은 수의 박스를 가지고 싶은 경우에, float 나 inline-block 을 여기저기 바르는 방식은 박스가 옆으로 떨어지는게 아니라 밑으로 내려간다.
  • 이 경우에 자세히 보면 좌우 마진이 다르다. 그래서 일일이 7.2 px, 7.8 px 이렇게 마진값을 수정해 줘야 한다. 즉, 자동 완성 그리드가 없다.

Flexbox 레이아웃을 위한 기본 구조

  • 기존 inline-block 의 방식
    : 설정해 주어야 하는 요소에 inline-block 적용.

  • 플렉스 컨테이너와 플렉스 아이템
    : 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부른다.

  • 부모 요소의 display를 flex로 선언하면 자식 요소의 display 를 inline-block 이라 선언하지 않았는데 이미! inline-block 방식처럼 출력이 된다.

<div class="container">
	<div class="item">One</div>
	<div class="item">Two</div>
	<div class="item">Three
    	    <br>has
            <br>extra
            <br>text
    </div>
</div>


“컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”

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

1. display: flex;

.container {
	display: flex;
	/* display: inline-flex; */
}
  • 예시

  • display : flex; 로 선언하면 flex item 들이 가로 요소로 배치되고 각 item 의 width 너비 값 만큼만 공간을 차지하게 된다. height는 컨테이너의 높이만큼 늘어나게 된다.

  • width 값을 설정하지 않으면, 해당 content 의 크기로 width 값이 설정된다.

  • 메인축과 교차축
    : 아이템들이 배치된 방향의 축을 메인축(Main Axis),
    메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)이라고 부른다.

2. 배치 방향 설정, flex-direction

  • 아이템들이 배치되는 축의 방향을 설정한다.
    크기가 작은 모바일 기기에서 column으로 배치하다가 일정 폭 이상이 되면 row로 바꿔주는 식으로 반응형 레이아웃을 구현할 때 유용한 방법이다.
.container {
	flex-direction: row;    /* 기본 디폴트 값입니다 */
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

3. 줄넘김 처리 설정, flex-wrap

  • 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때, 아이템 줄바꿈을 어떻게 할지 결정하는 속성
.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

nowrap (기본값)
줄바꿈을 하지 않고 브라우저 창을 줄여도 폭의 비율을 그대로 유지해 준다.
wrap
줄바꿈을 합니다. float이나 inline-block으로 배치한 요소들과 비슷하게 동작한다.
각각의 박스 요소의 폭을 유지하고 한 줄에 넘치는 박스들을 밑으로 떨어트린다.
wrap-reverse
줄바꿈을 하는데, 아이템을 역순으로 배치한다.

4. flex-flow

  • flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성.
.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

5. 메인축 방향 정렬 justify-content

메인축 방향으로 아이템들을 정렬하는 속성

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}
  • flex-start (기본값)
    아이템들을 시작점으로 정렬한다.
    flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위.

  • flex-end
    아이템들을 끝점으로 정렬한다.
    flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래.

  • center
    아이템들을 가운데로 정렬한다.

  • space-between
    아이템들의 “사이(between)”에 균일한 간격을 만들어 준다.

  • space-around
    아이템들의 “둘레(around)”에 균일한 간격을 만들어 준다.

  • space-evenly
    아이템들의 사이와 양 끝에 균일한 간격을 만들어 준다.
    space 정렬을 이해하는 방법은 아래 사진을 참조!

6. 수직축 방향 정렬 align-items

수직축 방향으로 아이템을들 정렬하는 속성. (justify-content와 수직 방향의 정렬)

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}
  • stretch (기본값)
    아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남.

  • flex-start
    아이템들을 시작점으로 정렬.
    flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽.

  • flex-end
    아이템들을 끝으로 정렬.
    flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽.

  • center
    아이템들을 가운데로 정렬.

  • baseline
    아이템들을 텍스트 베이스라인 기준으로 정렬.

7. 여러 행 정렬 align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성.

.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; */
}

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

1. 유연한 박스의 기본 영역 flex-basis

flex-basis는 Flex 아이템의 기본 크기를 설정한다.
(flex-direction이 row일 때는 너비, column일 때는 높이).

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

: 기본값 auto는 해당 아이템의 width값을 사용한다. width를 따로 설정하지 않으면 컨텐츠의 크기가 된다. content는 컨텐츠의 크기로, width를 따로 설정하지 않은 경우와 같다.

2. 유연하게 늘리기 flex-grow

flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.
flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.

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

  • 비율 대로 늘리는 방법도 있다.
/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

3. 유연하게 줄이기 flex-shrink

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정한다. flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아지게 된다. ( 기본값은 1 )

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

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있다. 고정 크기는 width로 함께 설정 해준다.

flex-shrink: 0; 덕분에 컨테이너가 아무리 작아져도 (브라우저의 창을 줄였다 늘였다 해도),
flex-shrink:0; 으로 조절한 아이템은 찌그러지지 않고 설정한 width 값으로 지정된다.

4. flex

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성

.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; */
}

5. 수직축으로 아이템 정렬 align-self

align-items의 아이템 버전. align-items가 "전체 아이템"의 수직축 방향 정렬이라면, align-self는
"해당 아이템"의 수직축 방향 정렬이다.

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

: 기본값은 auto로, 기본적으로 align-items 설정을 상속 받는다.
align-self는 align-items보다 우선권이 있다. 전체 설정보다 각각의 개별 설정이 우선한다는 것을 염두에 두자.

6. 배치 순서 order

각 아이템들의 시각적 나열 순서를 결정하는 속성.
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치된다.

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

7. z-index

position 의 z-index 와 동일함. 숫자가 클수록 위로 올라온다.

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

출처 : 1분코딩 웹사이트 (노트에 정리한 내 필기 보다 훨씬 복습하기가 좋았음!!)

강력 추천!!

profile
.

0개의 댓글