Flex에 대해

flex

flexible-box를 사용할 수 있는 display 속성이다.

 

각각의 요소들을 item으로 보고 item들을 효과적으로 정렬하고 배치할 수 있도록 도와주기 때문에

 

flex를 잘 이해하고 습득하면아주 효과적인 웹 페이지를 만들 수 있다.

 

flex는 두 가지 관점에서 볼 수 있는데 하나는 부모 역할을 하는 container 입장이고,

 

두 번째는 각각의 container 안에서 자식 역할을 하는 item 입장 이다.

 

 

먼저 container 입장에서 사용할 수 있는 속성을 알아보자.

 

 

Container

 

1. flex-direction

 

flex-direction은 안에 있는 item들을 정렬할 때 

 

가로로 정렬할지 세로로 정렬할지를 선택할 수 있다. 정방향 가로정렬이 기본값이다.

 

 

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

 

2. flex-wrap

flex 는 기본적으로 item을 한줄에 정렬하려고 한다.

 

이때 중간에 끊고 줄바꿈을 하고 싶다면 flex-wrap을 사용할 수 있다. no-wrap이 기본값이다.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

 

 

3. justify-content

메인 축을 중심으로 아이템들을 여백과 함께 정렬하는 방식을 지정할 수있다.

flex-start가 기본 값이며 중앙 정렬을 원할 경우 center나 space-around등을 많이 사용한다.

.container {  
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}

 

 

4. align-content

flex-wrap 을 사용해서 item이 여러 줄로 존재하고 있을 때, 여백과 함께 정렬하는 방식을 지정할 수 있다.

 

기본값은 flex-start이며, 한 줄 밖에 없을 때는 justify-content와 똑같다.

 

5. align-items

container 안에서 items 들간의 세로정렬을 하는데 쓰인다.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

 

 

item

1. order

각각의 아이템은 기본적으로 html 에 나열된 순서대로 우선순위가 매겨진다. 하지만 order를 임의로 지정하면 지정한 order 순서대로 정렬할 수 있다.

2. flex-grow

flex grow는 각 아이템들이 공간을 차지하는 비율을 지정한다. 기본 값은 모두 1이며 모두 1일 경우에는 공간이 균등하게 분배되지만 한 아이템이 2이면 해당 아이템에만 2배의 공간을 할당하고 나머지 공간을 남은 아이템들이 균등하게 가져간다.

기본값으로 flex : 1이렇게 만 적어도 된다.

 

 

출처 : CSS 기초 내용 정리