CSS : flex 노트정리.

flex는 인터페이스 안에 아이템 간 공간 배분 기능을 위한 1차원(행이나 열) 레이아웃 모델이며

2차원인 grid와 대조된다.

 

---

flexbox 에는 두 개의 축이 있다.

 

 

주축은

 

flex-direction 이며 4개의 값이 있다,

 

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

 

 

row , row-reverse 는 인라인 방향 행을 따른다.

 

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

 

column , column-reverse 는 블록 방향을 따른다.

 

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

 

교차축

 

교차축은 주축에 수직방향으로 , 만약 flex-direction(주축)이 row  나 row-reverse  면 교차축은 열(colum) 방향이다.

 

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

 

 

주죽이 colmn 방향이면 교차축은 행(row) 방향을 따른다.

 

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

 

정리

 

주축이 row 면 교차축은 column

주축이 column 이면 교차축은 row 

 

주축과 교차축은 서로 반대.

 

 

flex 컨테이너

 

문서영역에서 flexbox가 놓인 곳을 flex 컨테이너라고 부르는데 영역내의 컨테이너 요소에 display:flex 또는 lnline-flex  로 지정한다. 이 값이 지정되면 컨테이너의 1차 자식요소가 flex  항목이 된다. 

 

flex 컨터이너를 생성하면 flex 아래 자식들은 기본값을 같는다.

 

• 항목은 행으로 나열됨 (flex-direction 의 기본값은 row)
• 항목은 주축의 시작 선에서 시작. (flex-strat 지점)
• 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있다.
• 항목의 교차축은 요소의 크기에 맞게 늘어난다.
• flex-basis 는 auto
• flex-wrap 은 nowrap

 

flex 항목들은 주축의 따라서 정렬되며 내부 크기가 컨테이너의 크기보다 크면 줄바꿈이 되어 내려오는게 아니라 주축 방향으로 흘러 넘치게 된다. 그리고 어떤 항목이 다른 항목보다 높이값이 크면 다른 모든 항목들은 긴 항목에 맞게 교차축을 따라 늘어난다.

 

 

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

 

 

flex-direction

 

flex 컨테이너에 flex-direction 속성을 지정하면 flex 항목이 나열되는 방향을 변경 할수 있는데 . row . row-reverse 는 행으로 나열되며 reverse 는 row 일때  start지점에서 123 이라면 reversms  end 지점에서 321 이렇게 나열된다.

 

column 은 행 방향으로 위에 값과 동일하게 적용된다.

 

 

 

 

계속 업데이트....