[CSS] FLEX 튜토리얼 (main axis, cross axis)

Flexbox

Flexbox는 반응형 레이아웃 및 구성 요소를 만드는 데 사용된다.

 

---

 

Flexbox는 CSS3 레이아웃으로 사용자 인터페이스에 대해 최적화된 배치를 해준다.

지금부터 행과 열 형태로 레이아웃을 구성하는 Flexbox에 대해 알아보자

 

 

Flexbox 적용법

display : flex;

적용법은 간단하다.

Flexbox를 적용하고 싶은 레이아웃에 대해 display 속성을 flex로 설정하면 된다.

 

 

FlexBox를 설정하면 여러 속성을 활용하여 커스터마이징을 할 수 있다.

 

 

위 사진을 보면 여러 속성이 있는 것을 확인할 수 있다.

기본 Flexbox 속성들을 지금부터 알아보자.

 

Flexbox 속성

• main axis
• main-start | main-end
• main size
• cross axis
• cross-start | cross-end
• cross size

 

✒️ main axis

Flexbox의 가로축

✒️ main-start | main-end

Flexbox의 가로의 시작점과 끝점

✒️ main size

Flexbox의 가로 사이즈

 

 

✏️ cross axis

Flexbox의 세로축

✏️ cross-start | cross-end

Flexbox의 세로의 시작점과 끝점

✏️ cross size

Flexbox의 세로 사이즈

 

 

---

flex-direction

• row

  

  
  
• row-reverse

  

• column

  

• column-reverse

  

 

 

flex-direction에 따라 main axis와 cross axis의 위치가 달라진다.

그에 따른 main-start와 main-end, cross-start와 cross-end도 같이 달라진다.

 

 

참고 사이트

An Introduction to Flexbox

MDN-flex

 

 

 

좋아요는 로그인하지 않아도 누를 수 있습니다!