반응형 CSS Flex 박스1 - (flex, justify-content ,Flex-Wrap)

안녕하세요 이번 포스팅은 반응형 CSS flex 박스 에 대해 알아보겠습니다.

 

 

저도 공부한 내용을 정리하는 포스팅이다 보니 틀린 점도 있고 설명이 부족한 점도 있을 거에요

 

참고해서 봐주세요

 

시작합니다.~

 

반응형 CSS flex박스는 원리와 개념을 이해할려고 하는 게 중요

⇒ 어떤 식으로 돌아가는지라도 알아야 한다.

 

FlexBox

페이지 콘텐츠 박스에 공간을 분배하는 것

px쓰면 하드코딩이 된다.

왜냐? 사용자마다 사용환경이 다른데 거기에 영향을 주기 때문에(크롬,익스플로러 등)

 

위에는 예시

 

FlexBox의 두개의 요소

본축과 교차축이 존재

EX)

< - > 가로가 본축

세로가 교차축

⇒ flex-direction

속성을 통해서 축을 변경할 수 있다.

컨테이너 안에서 본축을 결정하는 요소

 

flex의 속성값들

1.row

가로

2.row-reverse

가로로 배치되는 건 동일하나 방향이 반대로 됨

3.column

본축이 상하로 변경됨4.

column-reverse

하-상으로 변경된다.

 

 

justify-content

주축을 기준으로 요소와 컨텐츠를 어떻게 배치할지 결정하는 요소

default값으로 flex-start로 입력

주축이 왼쪽에서 오른쪽 방향이라면 요소도 왼쪽에서 오른쪽으로 정렬됨

속성

1.flex-end

주축이 왼쪽에서 오른쪽 방향이라면 요소가 오른쪽에서 왼쪽으로 정렬

2.center

주축을 따라 중앙으로 이동된다.

3.space-between

바깥쪽 여백을 다 없애고 요소 사이에 간격을 띄운다.

즉 요소 사이에만 빈 곳이 생김

컨테이너와는 여백이 없음

4.space-around

요소사에도 여백을 주고 컨테이너 바깥쪽에도 똑같이 여백을 준다.

5.space-evenly

요소사이 요소와 컨테이너 사이에 동일하게 여백을 준다.

⇒ flex-direction이랑 justify-content와 세트로 가야한다.

 

 

Flex-Wrap

주축이 수평일 때 새로운 행을 만들어 요소를 정렬하고

주축이 수직일 때는 새로운 열을 만들어 요소를 정렬하는 속성

속성값

1. wrap
2. wrap-reverse
3. nowrap

⇒ 교차축의 방향을 정하는 것

 

 

이상으로 반응형 CSS Flex 박스1 - (flex, justify-content ,Flex-Wrap) 포스팅을 마치겠습니다

 

CSS 중 제일 헷갈리는 파트 같네요..