📝 오늘 한 것

1. flexbox

📚 배운 것

1. display

1) display: block

• 너비와 높이를 가질 수 있다

• 한 줄에는 하나의 box만 위치시킬 수 있다

2) display: inline

• 너비와 높이를 가질 수 없다

• box가 아니라 element일 뿐이다
  (한 줄에 여러 개를 위치시킬 수 있다)

3) display: inline-block

• 너비와 높이를 가질 수 있다

• 여러 개의 box를 한 줄에 위치시킬 수 있다

display: inline-block을 사용하면 여러 개의 box를 한 줄에 위치시키는 것까지는 할 수 있다.

다만 여기서 더 나아가 box들 사이의 간격을 일정하게 띄우기 위해서는 margin-left를 이용해 pixel 단위로 값을 주어야 한다.

그러나 이렇게 하면 screen 크기가 변할 때마다 레이아웃이 이상하게 변하게 된다.

box들 사이의 간격을 띄우기 위해서는 flexbox를 이용하는 게 편리하다.

2. flexbox

1) display: flex

flexbox에서 box들의 위치를 바꾸기 위해서는 box들이 flex container 안에 있어야 한다.
'인접한' 부모 flex container에서 그 안의 자식 flex item들의 위치를 조정할 수 있다.

2) main axis / cross axis

flex-direction: row (기본값) 일 때

justify-content / main-axis (이 경우에는 horizontal)
align-items / cross-axis (이 경우에는 vertical)

3) align-self

align-self는 하나의 flex item에 따로 적용할 수 있다.

기본적으로 align-items: center가 설정되어 있기 때문에 height 값이 지정되어 있지 않은 경우 하나의 flex item에 align-self를 적용해도 layout이 변하지 않는다.

align-items나 align-self를 적용하여 layout을 기본값에서 바꾸기 위해서는 flex container에 height 값을 설정해줘야 한다.

4) order

.child:nth-child(2) {
  order: 1;
}

HTML을 수정할 수 없을 때 유용하게 사용할 수 있다.

기본적으로 flex item의 order 값은 0이다.

flex item들은 설정한 order 값에 따라 오름차순으로 정렬된다.

order은 탭 순서와 상관없이 화면에 보이는 순서에만 영향을 미친다.

✨ 내일 할 것

1. flexbox