css - flexbox (container , item)

flexbox는 container에 적용되는 속성값이 존재하고 각각의 item에 적용되는 속성값이 존재한다. 

 

📌container에 꾸며줄 수 있는 속성 

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

 

• display

 

• flex-direction

row(기본값) - 수평,가로 기준으로 순서 정방향 

row-reverse-가로 반대 방향

column - 수직,세로

column - 세로 반대 방향

 

• flex-wrap: 한줄에 가득차면 다음줄로 넘어갈지 안갈지 결정 

nowrap(기본값)

wrap

wrap-reverse

 

• flex-flow:flex-direction, flex-wrap 합한 것 

column nowrap

 

• justify-content:item들을 중심축에서 어떻게 배치할 것인지 결정(main-axis)

flex-start (기본값 )왼쪽에서 순서대로 수평 수직 상관없이 배치

flex-end:item의 순서는 유지하되 오른쪽으로 배치 column이며 밑으로 배치 

center : item들은 중간에 배치

space-around:양쪽에 있는 공간이 제일 좁음

space-evenly:똑같은 간격으로 배치 

space-between: 양쪽을 화면에 맞게 배치, 중간에만 틈 넣어주기

 

• align-items:item들을 반대축에서 배치

baseline으로 인해 item1의 크기가 커진후에도 textline이 균등하게 맞춰진 것을 볼 수 있다.

 

 

• align-content : 반대축의 item 지정

center, space-around등

 

📌 item에 꾸며줄 수 있는 속성

order, flex-grow, flex-shrink, flex-basis, align-self

 

• order

order에 따라 순서가 적용되는 화면

 

 

• flex-grow : container가 커질 때의 비율

기본값 : 0 

flex-grow 속성에 따라 다르게 설정한 값(비율)에 따라 화면이 커짐

 

 

• flex-shrink : container가 점점 작아졌을 때 비율

기본값:0

 

item1이 줄어들때 다른 item들에 비해 3배 더 작게 줄어드는 화면

 

 

 

• flex- basis 

기본값:auto - grow, shrink가 지정한 값으로 줄어들고 늘어남 

화면을 줄이고 늘릴 때 item마다 설정한 % 비율로 적용

 

 

• align-self : item별로 정렬이 가능

item1만 center에 지정된 화면

 

 

 

참고자료

유투버 드림코딩님 영상을 참고하였습니다.

• https://youtu.be/7neASrWEFEM