TIL 08_CSS Layout 2

공부를 하면서 가장 어려웠던 Flex 부분은 1분 코딩 Flex편을 참고하여 작성했다(참고라고 했지만 거의 복붙수준....다음번 자기소개 페이지를 만들때 제대로 적용하고 이해해볼 예정..!!

Flex 속성

Flex는 Flexible Box, Flexbox라고 부르기도 한다. Flex는 레이아웃 배치 전용 기능으로 고안되었다.
그래서 레이아웃을 만들 때 딱히 사용할게 없어서 쓰던 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들이 많다.

기본 HTML 구조

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

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

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

Flex Container에 적용하는 속성

• display:flex;

  Flex Container에 display: flex;를 적용하는게 시작!
  이 한 줄의 CSS만으로 아이템들은 기본적으로 아래 그림과 같이 배치된다.

.container {
	display: flex;
}

• flex-direction(배치 방향 설정)

  아이템들이 배치되는 축의 방향을 결정하는 속성. 즉 “메인축의 방향을 가로로 할거냐 세로로 할거냐”를 정해주는 것이다.

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

• row(기본값) : 아이템들이 행(가로) 방향으로 배치
• row-reverse : 아이템들이 역순으로 가로 배치
• column : 아이템들이 열(세로) 방향으로 배치
• column-reverse : 아이템들이 역순으로 세로 배치

• flex-wrap

  컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성이다.

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

• flex-flow

  flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다.
  flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 된다.

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

• justify-content(메인축 방향 정렬)

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

.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 : 아이템들을 끝점으로 정렬.
• center : 가운데 정렬
• space-between : 아이템들의 '사이(between)'에 균일한 간격 생성.
• space-around : 아이템들의 '둘레(around)'에 균일한 간격 생성.
• space-evenly : 아이템들의 사이와 양 끝에 균일한 간격 생성
  ** IE와 엣지에서는 지원 불가

• align-items(수직축 방향 정렬)

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

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

justify-content: center; + align-item: center; = ↓ 이렇게 아이템을 한 가운데 놓는 것이 용이!

Flex Item에 적용하는 속성

• flex-basis

  flex-basis는 Flex item의 기본 크기를 설정한다(flex-direction이 row일 때는 너비, column일 때는 높이).
  기본값인 auto는 해당 아이템의 width를 사용한다.

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

• flex-grow

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

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

• flex-shrink

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

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

마치며!

아직도 이해가 되지 않는 부분이 너무 많다! CSS의 꽃이라고는 하지만 전혀 꽃 같진 않다.
자기소개 페이지에 직접 코드를 적어보면서 익혀보기로 다짐! (메뉴바에 Flex 코드를 사용할 예정!)