[CSS] 플렉스 Flexbox, 반응형 웹을 위해

반응형웹을 위한 플렉스(Flex)

플렉스(flex)는 크기가 다른 스크린에서도 왠만하면 정돈되서 보여준다.

반응형 웹을 만들기위해 기본이 되는 요소인것 같다.

 

사용법

display: flex;

 

flex-direction 정렬 방향을 정하자

- row (기본값): 높이가 꽉차고 옆으로 정렬된다

- row-reverse: 마찬가지로 높이가 꽉차고, 반대 순서로 정렬된다.

- column: 양옆넓이가 꽉차고 위에서 위아래로 정렬된다.

- column-reverse: column에서 반대방향으로 정렬

 

예)

display: flex;
flex-direction: row-reverse;

 

justify-content 플렉스 안에 콘텐츠 정렬 방법을 전하자

- flex-start: (기본값) 왼쪽에서(정렬방향이 column일경우 위)부터

- flex-end: 오른쪽에서(정렬방향이 column일경우 아래)부터 

- space-between: 양쪽 끝으로 정렬

- space-around: 양쪽 끝에 여백을 주고 정렬

- space-evenly: 여백을 똑같이 주면서 정렬

 

예)

display: flex;
flex-direction: row; //(기본값이면 생략가능)
justify-content: center;

 

align-items 위의 justify-content와 정렬방향이 반대

justify-content가 x축이면 y축,

justify-content가 y축이면(flex-direction으로 column 정렬시) align-items는 x축으로 정렬을 해준다.

 

- flex-start: 맨 위에 붙여서 정렬(column일경우 맨 왼쪽)

- flex-end: 맨 아래 붙어서 정렬(column일 경운 오른쪽)

- center: 정 가운데 위치

- stretch: (기본값) flex 컨테이너를 꽉 채워서 정렬된다

- baseline: flex-start와 비슷하다, 글자가 위치한 첫 줄에 정렬

 

예)

display: flex;
flex-direction: row; //(기본값이면 생략가능)
align-items: center;

 

flex-wrap 자동 줄바꿈을 도와줘~~

기본적으로 flex는 컨테이너의 크기에 맞춰 줄어든다.

하지만 요소에 크기에 맞춰 다음줄에 내려가도록 할 때 사용

 

- nowrap: (기본값) 컨테이너에 꽉 채워져서 늘어나고 줄어든다

- wrap: 플렉스박스에 들어간 요소의 크기에 맞춰서 다음줄로 자동으로 내려감

- wrap-reverse: wrap의 역방향

display: flex;
flex-direction: row; //(기본값이면 생략가능)
flex-wrap: wrap;

 

flex-shrink 줄어드는 정도를 조정

앞서 말했듯이 플렉스안의 요소는 줄어들고 늘어난다.

flex-shrink의 값이 높으면 더 많이 줄어든다.

 

밑의 예의 #box2가 더 많이 줄어든다

#box1 {
  display: flex;
  flex-shrink: 1;
}

#box2 {
  display: flex;
  flex-shrink: 2;
}

 

 

flex-grow 늘어다는 정도를 조정

flex-shrink와 반대

 

밑의 예의 #box2가 더 많이 자리를 차지한다

#box1 {
  display: flex;
  flex-grow: 1;
}

#box2 {
  display: flex;
  flex-grow: 2;
}

 

flex-basis 요소의 기본 크기를 정해준다

flex-shrink와 flex-grow로 크기를 정하기 전에 요소의 기본 크기를 정해준다

 

#box1에는 10em, #bo2에는 20em을 줬다.

예)

#box1 {
  display: flex;
  flex-basis: 10em;
  flex-grow: 1;
}

#box2 {
  display: flex;
  flex-basis: 20em;
  flex-grow: 2;
}

 

 

flex, flex-grow flex-shrink flex-basis를 한번에 사용하자

사용법

display: flex;
flex: 1 0 10px;

 

풀어보면

flex-grow 1, flex-shrink 0, flex-basis 10px

 

 

order 요소의 우선순위를 정하다

기본적으로 요소의 우선순위는 같기때문에 먼저쓰면 앞에온다.

하지만 order를 사용면 순서를 바꿀 수 있다.

 

#box1이 먼저 만들어졌어도, #box2보다 뒤로간다.

#box1 {
  order: 2;
}

#box2 {
  order: 1;
}

 

align-self 개별 정렬

align-items와 달리 align-self는 개별정리를 해준다.

align-items와 같은 속성을 사용한다.

즉, flex-start, flex-end, center, stretch, baseline를 이용해서 정렬해준다

align-self: flex-end;