#1.2 CSS Flex, Main Axis and Cross Axis

햅삐한 포메라리안 2022. 2. 27. 21:10

박스 가운데 정렬 justify-content: center;

flex container의 flex-direction 기본값은 row(가로)다.

그래서 박스들이 가로로 줄지어 서있다.

justify-content: center;

justify-content는 수평축에 있는 flex children의 위치를 변경한다

center를 입력하면 flex안에 있는 아이들(box)이 가운데 정렬이 된다.

justify-content: space-between;

space-between은 box사이에 공간을 주는 것이다.

justify-content: space-around;

space-around는 화면 끝에 박스에 간격을 준다.

비율은 1:2:2:1이다.

body {
  display: flex;
  flex-direction: row;
}

기본적으로 flex를 주면 박스의 방향이 row입니다.

이 때 main-axis는 위에 사진에서 빨간색이 될 것이고 수평으로 박스들을 움직이려면 위에서 한 것 처럼 justify-content를 사용해서 움직일 수 있습니다.

핵심

justify-content는 main axis 방향으로 움직입니다.

align-items는 cross axis 방향으로 움직입니다.

align-items: center;

여기서 박스들을 가운데로 옮기고 싶어서 align-items를 이용해서 가운데 정렬을 했는데 박스들이 전과 같다.

그 이유는 body(flex father)를 의 높이가 박스의 높이와 같이 때문이다.

즉, 박스들은 이미 수직 방향에서 컨테이너의 가운데에 있는 것과 마찬가지이다.

컨테이너의 높이를 설정해 주게 되면 이제 박스들이 수직방향에서 가운데로 정렬이 가능해진다.

위의 사진과 비교해보세요

align-items: stretch;

여기서 stretch를 적용했는데 박스가 늘어나지 않고 그대로이다.

그 이유는 박스에 높이가 정해져있기 때문이다.

이때 박스의 높이를 지우면?

이렇게 flex father의 높이만큼 박스가 늘어난 것을 확인할 수 있다.

align-items: flex-end;

박스에 높이를 주고 flex-end를 적용하면 박스가 수직방향으로 맨 끝(40vh를 넘지 않음)으로 이동한 것을 확인할 수 있다.

align-items: flex-start;

flex-start는 기본 값이다.

그리고 하나 더!

space-between은 justify-content에서만 작용합니다.