CSS Flexbox

안녕하세요. 

css에서 요즘 가장 핫한 속성이 flexbox라고 생각이 드는데요,

오늘은 flex에 대한 이야기를 포스팅해보겠습니다. 

 

먼저 flexbox에서 주로 사용하는 속성들은 다음과 같습니다. 

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

위 속성들을 이용해서 flexbox 를 유용하게 사용할 수 있을 것 같아요. 

자세한 정보는 MDN에서 확인할 수 있습니다. 

 

축(axis)

flexbox 사용시 꼭 알아야 하는 개념은 축 인데요, 

그래프에서 x축, y축 하는 것처럼 main axis 와 cross axis를 잘 알아야 합니다. 

 

main axis : 주축은 flex-direction에 의해 정의되며 4개의 값을 가질 수 있습니다:

• row
• row-reverse
• column
• column-reverse

row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따릅니다.

column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따릅니다.

 

cross axis : 교차축은 주축의 반대방향이라고 생각하면 됩니다. 

 

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

 

 

오늘은 간략하게 포스팅을 마무리 하겠습니다 ㅎㅎ

차후 flexbox의 특별한 이슈가 있으면 내용 추가해서 공유할께요!