[CSS] flex 정리 : 중앙 정렬, justify-content, align-content

 

 

💡 flexbox : 행 or 열을 주축('가로 ➡️' 가 기본값)으로 설정해 웹 요소를 배치 / 정렬하는 1차원 레이아웃 방식

플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결정할 요소, ul

플렉스 아이템 : 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소, li

<ul id="first-ul">
  <li>고양이</li>
  <li>강아지</li>
  <li>오리</li>
  <li>달팽이</li>
  <li>고라니</li>
</ul>

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#first-ul {
  display: flex;
  padding: 0;
  list-style: none;
  height: 300px;
}

 

먼저 기본으로 이렇게 flex 를 설정해 주면

 

⬇️ 한줄로 정렬된다!

 

⬇️ display: flex 는 기본적으로 블록레벨 속성, 그 줄을 전체 차지함

⬇️ display: inline-flex 인라인으로 만들고 싶을 때 사용, 컨텐츠 영역만 차지함

 

 

💡 여러가지 설정을 알아보자.

✳️ flex-direction : 컨테이너의 주축을 결정! 행은 가로, 열은 세로를 주축으로 함

속성값	의미
row	기본값! 주축은 행이고 방향은 콘텐츠의 방향과 동일
row-reverse	주축은 행이고 방향은 콘텐츠의 방향과 반대
column	주축은 열이고 방향은 콘텐츠의 방향과 동일
column-reverse	주축은 열이고 방향은 콘텐츠의 방향과 반대

✳️ flex-wrap : 아이템들을 강제로 한 줄에 배치할 것인지
or 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현 할 것인지 결정하는 속성

속성값	의미
nowrap	기본값! 공간이 부족하더라도 요소를 한 줄에 배치
rap	공간 크기에 따라 요소가 여러 행에 걸쳐 배치
wrap-reverse	wrap 과 동일하나 요소 나열되는 시작점과 끝점이 반대

✴️ flex-flow : 위 두 속성을 한 번에 ~ 

#first-ul {
  display: flex;
  padding: 0;
  list-style: none;
  height: 300px;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  /* flex-flow: row wrap; // 위 두 줄을 한번에 쓴 것 */
}

 

코드를 위처럼 바꾸면 리스트 순서가 거꾸로 바뀌고, 창이 좁아지니 자동으로 두 줄로 바뀐다!

❗️그런데 만약 width 가 지정이 되어 있다면 flex-wrap: wrap ; 을 설정해도 한 줄로 설정된다.

 

✳️ justify-content : 아이템들이 주축을 따라 배치될 때, 요소 사이의 간격을 정해준다.

속성값	의미
flex-start	주축의 시작점으로부터 끝점을 향해 배치
flex-end	주축의 끝점으로부터 시작점을 향해 배치
center	주축의 중심부에 배치
space-between	주축에서 일정한 간격을 둔 채 양 끝 정렬 배치
space-around	모든 요소가 동일한 여백을 갖도록 배치
space-evenly	모든 요소 사이의 간격을 동일하게 유지해 배치

 

하나씩 설정해 보면 ~ (기본값은 넘어가겠다 ~)

 

⬇️ flex-end : 설정해 둔 width: 500px 내에서 오른쪽 끝에 붙어 배치

#first-ul {
  width: 400px;
  display: flex;
  padding: 0;
  list-style: none;
  height: 300px;
  justify-content: flex-end;
}

 

⬇️ center : 주축의 가운데 배치

 

⬇️ space-between : 요소들과 일정한 간격을 둔 채 양 끝 정렬 배치

 

⬇️ space-around : 모든 요소들이 동일한 여백(자기 자신의 좌우 여백이 동일) 을 갖도록 배치

 

⬇️ space-evenly : 모든 요소(총 width 까지의) 사이의 간격을 동일하게 배치

 

❗️ 여기서!! 세로 방향으로 바꿔주면 아래 같은 느낌

flex-direction: column;

 

✳️ align-items : 컨테이너의 교차축 위에서 아이템들이 어떤 식으로 정렬될 것인지 결정

✳️ align-self : 각각의 아이템이 교차축에서 어떤 식으로 정렬될 것인지 스스로 결정

속성값	의미
stretch	아이템이 교차축 길이에 맞춰 늘어남. but 너비 or 높이가 우선
flex-start	교차축의 시작점으로부터 끝점을 향해 배치
flex-end	교차축의 끝점으로부터 시작점을 향해 배치
center	교차축의 중심부에 배치

 

⬇️ flex-end : 교차축(현재 세로) 끝에 붙어 배치

#first-ul {
  display: flex;
  padding: 0;
  list-style: none;
  height: 300px;
  align-items: flex-end;
}

 

⬇️ center : 교차축(현재 세로) 중심부에 배치

 

❗️여기서!! 아이템들 중 특정 li 의 정렬만 바꾸고 싶다면?

#first-ul li:nth-child(3) {
  align-self: flex-start;
}

 

✳️ align-content : 교차축 위에서 justify-content 와 동일하게 사용할 수 있는 속성
(교차축에서의 align-item : center)

1. flex-wrap 의 값이 wrap 으로 지정되어 있을 때
2. 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때
위 두 조건이 만족되면서 여유 공간이 있을 때만 동작한다.

 

❗️ align-item: center 는 flex-wrap: nowrap(기본값) 일 때 쓰는 속성이고,

align-content:center 는 flex-wrap: wrap 일 때 쓰는 속성이라 생각하면 된다!

 

❗️둘을 구분해서 쓰는 이유는 ~
space-between 등의 속성을 쓸 수 있어서 여러 행으로 나눠졌을 때의 간격을 조절할 수 있기 때문!

#first-ul {
  display: flex;
  padding: 0;
  list-style: none;
  height: 100px;
  flex-wrap: wrap;
  align-content: space-between;
}

 

✳️ flex-grow : 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고,
컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있다. ** 기본값 : 0

✳️ flex-shrink : 아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고,
컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있다. ** 기본값 : 1

(0 을 주면 창이 작아도 줄어들지 않음)

속성값	의미
숫자	음수는 허용되지 않는다. 양의 정수, 양의 실수 가능

 

⬇️ flex-grow

#first-ul {
  display: flex;
  padding: 0;
  list-style: none;
  height: 100px;
}

#first-ul li {
  background-color: antiquewhite; /* 구분하기 위한 컬러 */
}

#first-ul li:nth-child(2n) {
  background-color: aquamarine; /* 구분하기 위한 컬러 */
}

#first-ul li:nth-child(2) {
  flex-grow: 1;
}

 

❗️ 여유 공간이 있을 때만 기능한다!

 

다른 li 에도 flex-grow 를 넣어보면?

#first-ul li:nth-child(3) {
  flex-grow: 2;
}

 

입력한 대로 1 : 2 비율로 커진다.

 

⬇️ flex-shrink

#first-ul li:nth-child(2) {
  flex-shrink: 2;
}

 

창이 좁아 줄어드는 상황에서 상대적으로 더 줄어든다!

 

✳️ flex-basis : 아이템의 초기 크기를 지정!
box-sizing 이 따로 설정되지 않은 경우, 콘텐츠 박스의 크기를 결정하게 된다. ** 기본값 : outo

속성값	의미
단위가 있는 값	width 속성을 정의할 때와 동일한 방식

#first-ul li:nth-child(2) {
  flex-basis: 100px;
  flex-shrink: 2;
}

#first-ul li:nth-child(3) {
  flex-basis: 200px;
  flex-shrink: 3;
}

flex-basis 로 초기 크기를 강아지가 더 작게 설정해 놨지만

flex-shrink 로 축소 값을 오리에게 더 크게 주어서 창이 작을 땐 오리가 더 작아진다.

 

✴️ flex : flex-grow, flex-shrink, flex-basis 세 가지 속성을 한 번에~ (적혀 있는 순서대로)

#first-ul li:nth-child(2) {
  flex: 0 0 200px;
}

 

기본 width : 200px! 확대, 축소 둘 다 ❌

 

#first-ul li:nth-child(2) {
  flex: 1 1 200px;
}

기본 width : 200px! 확대, 축소 둘 다 되게 설정 ⭕️

 

✳️ order : 아이템의 배치 순서를 정할 수 있고, 지정한 숫자에 맞춰 오름차순으로 배치!
코드에 영향을 끼치지 않고, 보여지는 순서에만 영향을 준다.

속성값	의미
정수	같은 값이면 코드 상의 순서대로!

 

#first-ul li:nth-child(1) { order: -2; }

#first-ul li:nth-child(2) { order: -4; }

#first-ul li:nth-child(3) { order: 2; }

#first-ul li:nth-child(4) { order: 3; }

#first-ul li:nth-child(5) { order: 5; }

이렇게 순서를 맘대로 바꿀 수 있고, 음수도 사용이 가능하다!

하지만 코드는 그대로 있으니 유의! (컬러 값이 그대로 들어가 있어!)