flex Box(개념 -container 적용 되는 속성들 ), 중심축

Flex Box (Flexible Box Module )

→행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드 입니다.

레이아웃(layout -배치):컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에

                                     효과적으로배열하는 일 

Flex Box를 조금더 쉽게 이해하기 위해서 참조해야하는 사진

 

• 기본축 (main axis) :  flex item 배치되고 있는 방향 (main start, main end) = 페이지를 가로지는 행 - 중심 축 
• 교차 축(cross axis) : 내부에  배치되는 방향에 직각을 이루는 축(cross start,cross end) -반대 축   
• flex item :  Flex Container  구성요소 

 

Cotainer에 적용 되는 속성
수평 정렬 

 

• display: flex (Flex Container를 만드는 속성) =  기본적으로
• flex-direction: flex container 내의 아이템을 배치 할때 
• flex-wrap : 강제로 한줄에 배치되게 할 것인지, 여러 줄로 래핑될 것인지 결정 - defaul 값 = (nowrap) 한줄에 배치
•   + (wrap -reverse)역 배치 - 제일 마지막 요수부터 오른쪽 아래 방향 
• flex-flow : flex-derection(정 방향 ), flex-warp(래핑)을 하나의 단축 속성으로 결합 
• justify-content :  가로 축을 기준으로  좌우 에 대한 정렬 (수평 정렬 )
• flex-end : 요소들을 컨테이너의 우측으로 정렬
• center : 요소들을 컨테이너의 중앙으로 정렬
• space-between  :요소들 사이에 동일한 간격을 둠 -첫번째  마지막 요소를 끝에 붙이고  균등 분활 
• space-around  : 요소들 주위에 동일한 간격을 둠
• space-evenly  :첫번째로 오는 정렬 대상 전에 두개 의 인접한 정렬 대상 사이의 간격과 마지막 정렬 대상 이후의 간격이  같도록 항목이 분산 됨.

Cotainer에 적용 되는 속성
수직 정렬     

• align-contents :요소들의 줄 간격 조절할 떄 사용하는 속성- 줄 간격을 사용할 떄 상요하므로 무조건 둘 이상 으로                                  이루어진 요소들에서만 작동함 
• align -self :  교차축에 위치한 모든 요소들의 위치를 지정해주는 것이 아니 특정 요소의 위치만 지정해 줄 수있음 
• align-items :교차축에 위치한 모든 요소들의 위치를 정해줌
•  

결과

• 1flex-drection-colum 
• 2 flex direction: row-reverse
• 3 flex wrap: reverse

• 1 justify-content ;flex-end
• 2  justify-content: space-aroun
• 3 justify-content: space-between

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이게임을 통해서 flex-box의 개념을 익히기 !!!

/#kohttps://flexboxfroggy.com/#ko