프론트엔드 #6 CSS - 3

FlexBox란?

Box와 Item들을 행과 열로 자유자재로 자유자재로 배치시켜주는 역할을 한다.

CSS의 꽃이라고도 한다. FlexBox만 잘 이해해도 웹페이지의 레이아웃을 쉽게 기획할 수 있다.

 

※ float

이미지와 텍스트를 어떻게 배치할 것인지 정의하는 문법

-> float: left : 이미지가 왼쪽에 배치되고, 텍스트들이 이미지를 감싸면서  배치될 수 있도록 해줌

FlexBox는 총 2가지만 이해하면 큰 그림을 이해할 수 있다.

① cotainer : Box에 적용되는 속성값

-> display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

    item : 아이템에 적용되는 속성값

-> order, flex-grow, flex-shrink, flex, align-self

 

② main axis : 수직, 수평축을 기준으로 정렬

실습)

HTML 코드 다 치기 귀찮으니까 div.container>div.item.item${$}*10 치고 TAB키 누르면 됨

※ 색상코드를 볼 수 있는 사이트 : https://material.io/resources/color/#!/?view.left=0&view.right=0

Color Tool - Material Design

★ flex

※ flex-direction: row : 왼쪽에서 오른쪽 정렬

※ flex-direction: row-reverse : 오른쪽에서 왼쪽 정렬

※ flex-direction: column : 수직축으로 정렬  (위에서 아래로 정렬)

※ flex-direction: column-reverse : 아래에서 위로 정렬 (아이템이 아래에서 부터 쌓임 10 9 8 ...)

 

※ justify-content: flex-start : Item들을 어떻게 배치할 것인지 결정해줌 (기본값 : flex-start=> 왼쪽에서 오른쪽으로 or 위에서 아래로)

※ justify-content: flex-end : flex-start와 반대 =>오른쪽에서 왼쪽, 아래에서 위로 (아이템이 위에서 부터 쌓임 1 2 3 ...)

※ justify-content: space-around : box를 둘러싸는 공간을 만들어줌 (맨 첫 아이템과 맨 끝 아이템 공간이 좁고, 그 사이 공간은 좀 넓음)

※ justify-content: space-evenly : box를 둘러싸는 공간을 만들어줌 (모두 같은 간격)

※ justify-content: space-between : box를 둘러싸는 공간을 만들어줌 (맨 첫, 맨 끝은 공간 없게 그 사이는 모두 같은 간격)

 

※ align-items => 중심축의 반대축에서 위치 변경

※ align-items: baseline : 텍스트 라인에 맞춰서 아이템 배치

※ align-content:  반대축 중심으로 위치변경

※ order: n; : n번째 위치로 (잘 쓰여지지 않음)

※ flex-grow: n; : 아이템이 컨테이너를 채울려고 크기가 변함 (기본값 0, 0이므로 페이지 크기를 늘려도 아이템들이 변화 x)

→ EX)

.item1 {
  background: #ef9a9a;
  flex-grow: 2;
}

.item2 {
  background: #f48fb1;
  flex-grow: 1;
}

.item3 {
  background: #ce93d8;
  flex-grow: 1;
}

 -> Item1은 item2, item3보다 두배로 늘어나게 됨

※ flex-shrink : 컨테이너가 점점 작아졌을때 어떻게 행동하는지 결정 (기본값: 0)

→ EX)

.item1 {
  background: #ef9a9a;
  flex-shrink: 2;
}

.item2 {
  background: #f48fb1;
  flex-shrink: 1;
}

.item3 {
  background: #ce93d8;
  flex-shrink: 1;
}

-> Item1은 item2, item3보다 컨테이너가 줄어들때 두배로 더 줄어들게 됨

 

※ flex-basis: auto : 아이템들이 공간을 얼마나 차지해야하는지 조금 더 세부적으로 명시할 수 있게 해줌 (기본값: auto)

→ EX)

.item {
  width: 40px;
  height: 40px;
  border: 1px solid black;
}

.item1 {
  background: #ef9a9a;
  flex-basis: 60%;
}

.item2 {
  background: #f48fb1;
  flex-basis: 30%;
}

.item3 {
  background: #ce93d8;
  flex-basis: 10%;
}

-> item1은 60% 공간차지, item2는 30% 공간차지, item3은 10% 공간차지

 

===================지금까지는 컨테이너 레벨=============================

※ align-self : '아이템 별로' 아이템들을 따로따로 정렬할 수 있음

→ Ex)

.item1 {
  background: #ef9a9a;
  flex-basis: 60%;
  align-self: center;
}

.item2 {
  background: #f48fb1;
  flex-basis: 30%;
}

.item3 {
  background: #ce93d8;
  flex-basis: 10%;
}

-> item1'만' center로 이동

 

※※ FlexBox의 속성값을 까먹어도 괜찮다!(그래도 기본적인 것들은 알면 훨씬 편함..) 현업에서도 잘 기억이 나지않을때 사이트에서 참고한다.

단, 큰 개념은 이해하고 있으면 사이트에서도 찾는 속도가 훨씬 빠르다.

사이트 주소 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

 

★ 마지막 정리!

FlexBox 큰 그림 2가지!

① Flexbox에는 컨테이너를 꾸며주는 속성값들이 있고, 아이템 각각 꾸며줄 수 있는 속성값들이 있다.

② Flexbox에는 중심축과 그의 반대축이 있다. 그리고 이 축은 수평이냐 수직이냐에 따라서 바뀌어질 수 있다.

 

★ FlexBox 연습!

FlexBox frog 게임 사이트 : https://flexboxfroggy.com/#ko