CSS | Flex

Flex

플렉스는 레이아웃을 배치할때 편리하게 이용할 수 있는 도구다

.flex_wrapper {
  display: flex;
  }

사용법은 요소들을 묶어주는 틀에 플렉스를 적용해주면 된다

플렉스는 기본적으로 가로로 정렬되는 것이 기본이다
그래서 block line level 의 요소들도 inline 요소들처럼 한 줄로 정렬하게 된다

플렉스의 요소들은 각각의 width, height 값 만큼 위치를 차지한다

flex-direction

레이아웃의 배치 방향과 순서를 바꾸는 속성,
플렉스는 기본 값이 가로 배치이지만 flex-direction 속성으로 바꿀 수 있다

.flex_wrapper {
  flex-direction: row; // 기본 값
  flex-direction: column; // 세로 배치
  flex-direction: row-reverse; // 가로 끝부터 배치
  flex-direction: column-reverse; // 세로 끝부터 배치
  }

flex-wrap

플렉스로 쌓여져있는 요소들이 정해진 너비보다 많으면 줄바꿈을 하게끔 해주는 속성

.flex_wrapper {
  flex-wrap: wrap; // 요소가 넘치면 아래로 줄바꿈
  flex-wrap: wrap-reverse; // 요소가 넘치면 위로 줄바꿈
}

flex-flow

.flex_wrapper {
  flex-flow: column wrap; // direction wrap
}

flex-direction, flex-wrap을 동시에 적용 시킬 수 있는 속성이다

justify-content

가로축을 기준으로 요소들을 다양한 방법으로 정렬시키는 속성

.flex_wrapper {
  justify-content: flex-start; // 기본값
  justify-content: flex-end; // 가로 축의 끝으로 정렬
  justify-content: center; // 가로 축의 중간으로 정렬
  justify-content: space-between; // 양 끝에 붙어있는 요소의 margin없이 같은 간격으로 정렬
  justify-content: space-around; // 각각의 요소의 양 옆에 일정한 margin을 부여해 정렬
  justify-content: space-evenly; // around와 달리 완전 같은 margin을 값을 요소들 사이에 부여해 배치

align-items

세로축을 기준으로 요소들을 다양한 방법으로 정렬시키는 속성

.flex_wrapper {
  align-items: flex-start; // 세로축의 시작부분으로 정렬
  align-items: flex-end; // 세로축의 끝부분으로 정렬
  align-items: center; // 세로축의 중간으로 정렬
}