CSS flexbox

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다.

오늘은 CSS의 flexbox에 대해 알아보았다.

flexbox는 상자를 정렬하기 위한 중요한 기능이다.

문서를 편집을 할 때도 정렬이 정말 중요한데 스타일을 정하는 CSS에서는 당연히 중요할 것 같았다.

flexbox는 어느 방향으로 정렬을 할 것인가가 우선 정해져야 한다.

가로방향으로 여러개 놓아진 박스들을 정렬할 것인지.

세로방향으로 여러개 놓아진 박스들을 정렬할 것인지 말이다.

우선 박스1 안에 박스2들이 들어가 있어야 안에

들어있는 박스2가 밖에 있는 박스1의 크기에 따라서 정렬을 할 수 있다.

우선 박스1의 display설정을 flex로 바꾸면

.box {
  display: flex;
}

박스1은 flexcontainer 가 되고 flexcontainer 안에 들어 있는 박스2들은 flexcontainer의 크기를 기준으로 정렬할 수 있다.

가로 방향중에서 왼쪽에서 오른쪽 방향으로 정렬한다면 아래와 같이 flexcontainer인 박스1의 flex-direction을 row로 설정해야 한다.

.box {
  display: flex;
  flex-direction: row;
}

가로방향 오른쪽에서 왼쪽 방향이라면 flex-direction을 row-reverse로 설정해야 한다.

.box {
  display: flex;
  flex-direction: row-reverse;
}

세로 방향으로 정렬한다면 flexcontainer인 박스1의 flex-direction을 column 으로 설정해야 한다.

.box {
  display: flex;
  flex-direction: column;
}

세로방향 오른쪽에서 왼쪽 방향이라면 flex-direction을 column-reverse로 설정해야 한다.

.box {
  display: flex;
  flex-direction: column-reverse;
}

지금까지는 박스1에 대한 설정이었다.

이제 박스2의 설정으로 들어가보면

박스2는 박스1이 flexcontainer가 되었을때 박스2는 flexitem이 되었다.

그래서 flex 세부 설정을 넣어주면 된다.

.inbox {
  flex-grow: 1;
}

flex-grow 설정을 1로 하면 그 크기와 딱 맞게 조절이 된다.

그렇게 되면 안의 박스의 크기를 따로 정해주지 않아도 맞출수 있다.

여백을 지정해서 사용할 수 있다.

더 다양하고 세부적인 내용이 틀릴 수도 있으나

여기까지가 오늘 flexbox에 대해 이해했던 것에 대한 내용이다.

기록을 중요하게 생각하는 사람입니다. 학습한 내용을 정리한 것이라 잘못된 정보가 있을 수 있습니다. 잘못된 정보는 언제든 말씀해 주시기 바랍니다.