flexBox
FlexBox
float
이미지와 텍스트의 배치를 위해 생긴 속성
값으로는 left, right, center가 있음 드림코딩 엘리_float
FlexBox
요소들의 행, 열을 자유자재로 배치시킬 수 있는 속성
본래 레이아웃을 만들때 사용하던 position이나 float, table보다 훨씬 간편함
flexbox에는 크게 container에 부여하는 속성값과 각각의 item에 부여하는 속성값으로 나눌수 있음
-
%
부모의 높이의 100%를 채움 -
vh
보이는 viewport의 100%를 채움
FlexBox_container 속성 값
container는 요소를 전체적으로 감싸주는 요소 드림코딩 엘리__container
flexbox에는 중심축과 반대축이 있으며
중심축이 수평축이라면 반대축은 수직축, 중심축이 수직축이라면 반대축은 수평축이 됨
아이템들은 좌에서 우로 정렬함
-
display: flex
flexbox를 적용하기 위해 container에display: flex를 적어서 container가 flexbox임을 알림 -
flex-direction
container의 수직, 수평을 정하는 속성 값-
row
왼쪽에서 오른쪽으로 가는 수평을 의미 flex-direction의 기본값 -
row-reverse
오른쪽에서 왼쪽으로 가는 행을 의미 row랑 반대 -
column
위에서 아래로 내려오는 열 -
column-reverse
column의 반대, 아래에서 위로 나열
-
-
flex-wrap
해당 줄에 자리가 없을때 다음 줄로 넘길지 말지 정하는 속성-
nowrap
기본값, 넘어가지않고 한줄을 유지함 -
wrap
요소의 크기를 유지하면서 다음 줄로 넘김 -
wrap-reverse
wrap과 반대로 기존 위치가 아래
-
-
flex-flow
flex-flow는 direction과 wrap을 한번에 묶어서 사용하는 것 순서는 direction wrapflex-flow: direction wrap; -
justfity-content
중심축에서 item들을 어떻게 배치할지 결정-
flex-start
기본값, 수평축이라면 왼쪽부터 정렬, 수직축이라면 위에서부터 정렬 -
flex-end
수평이라면 item을 오른쪽으로 정렬, 수직이라면 아래로 정렬
item의 순서는 유지 -
center
item을 가운데로 모음 -
space-around
각각 item들에게 space를 둘러줌
맨 끝쪽 item들은 space가 한번씩만 쳐지기때문에 다른 item들과 공간 차이가 남 -
space-evenly
각각 item들에게 스페이를 둘러줌
around와 달리 간격이 모두 같음 -
space-between
item을 양 끝은 제외하고 중간에만 공간을 넣어줌
양 끝 item은 끝에 딱 맞게 배치
-
-
align-items
반대축에서 item들을 배치-
baseline
text를 기준으로 같은 위치에서 균등하게 보이게함 드림코딩 엘리 -
center
반대축에서 아이템들을 정렬
-
-
align-content
반대축에서 item들을 지정
justify-content에서 사용한 속성값들을 모두 사용할 수 있음
FlexBox__item 속성 값
item은 container 안에 들어가 있는 각각의 요소를 의미 드림코딩 엘리
-
order
아이템들의 순서를 바꾸고 싶을때 사용
기본값은 0
-1처럼 음수도 가능(이러면 0앞으로 오게됨) -
flex-grow
해당 item의 크기가 container 크기에 맞춰서 커짐
기본값 0 -
flex-shrink
해당 item의 크기가 container 크기에 맞춰서 작아짐 -
flex-basis
item들이 공간을 얼마나 차지해야 하는지 세부적으로 명시하는 것(크기 비율)
기본값 auto
드림코딩 엘리_flex-basis -
align-self
각각의 item별로 위치를 정렬할 수 있음
container에서 지정한 것을 벗어나 item 하나만 위치를 정렬하고 싶을때 사용할 수 있음
기본값 auto
출처: 드림코딩 엘리, Jaeeun_새싹개발자