페이지를 만들면서 각각의 콘텐츠를
내가 원하는 방향이나 위치에 정렬시키기 위해서는
position
float
table
과 같은 기능을 복잡하게 구성해야 했다.
flexbox
는 이러한 복잡한 구성을 간단하게 구현 가능하게 해준다.
flexbox
기능을 사용하기 위해서는 container
와 item
의 관계를 이해해야 한다.
<div class ="container">
<div class ="item"></div>
<div class ="item"></div>
<div class ="item"></div>
</div>
item div
3개를 감싸는 커다란 container div
가 구성되어있다.
flexbox
기능을 사용하기 위해서는 부모 요소인 container div
에
display : flex
속성을 주면 된다.
flex-direction
중심축을 결정하는 기능이다 (row
또는 column
)
flex-direction: row; // 좌측 끝에서 우측으로 정렬 (기본값)
flex-direction: row-reverse; // 우측 끝에서 좌측으로 정렬
flex-direction: column; // 상단 끝에서 하단으로 정렬
flex-direction: column-reverse; // 하단 끝에서 상단으로 정렬
flex-wrap
flex-wrap: no-wrap; // window의 크기가 줄면 item의 크기도 같이 비례해서 줄어듦 (기본값)
flex-wrap: wrap; // window의 크기가 줄면 item의 크기는 변하지 않고 아래로 줄넘김됨
flex-wrap: wrap-reverse; // window의 크기가 줄면 item의 크기는 변하지 않고 위로 줄넘김됨
flex-flow
flex-direction
과 flex-wrap
을 합쳐놓은 기능이다
flex-flow: column wrap-reverse; // 이와같이 direction , wrap 순서로 두 개의 값을 입력하면 된다.
justify-content
중심축에 관련된 기능이다.
justify-content:flex-start; // item을 왼쪽으로 정렬 (기본값)
justify-content:flex-end; // item을 오른쪽으로 정렬
justify-content:center; // item을 가운데로 정렬
justify-content:space-around; // item의 주위에 간격을 줌
justify-content:space-evenly; // item끼리 , 양쪽 끝 전부 같은 간격을 가짐
justify-content:space-beetween; // item끼리 같은 간격을 가지고, 양쪽 끝은 붙힘
align-item
교차축에 관련된 기능이다.
align-item:stretch; // item을 container에 맞게 늘림 (기본값)
align-item:flex-start; // item을 위쪽으로 정렬
align-item:flex-end; // item을 아래쪽으로 정렬
align-item:center; // item을 중앙으로 정렬
align-item:baseline; // 처음 item의 text를 기준으로 나머지 item을 정렬
align-content
align-item
과 기본적으로 같은 기능을 하지만
align-content
는 flex-wrap
을 wrap
으로 두고 있을 때
그리고 item이 줄넘김 되어 두 줄 이상일 때 기능을 한다.
https://letsgojieun.tistory.com/49 // 두 기능의 차이점을 이해할 때 도움이 되었던 글이다
align-item:stretch; // item을 container에 맞게 늘림 (기본값)
align-item:flex-start; // item을 위쪽으로 정렬
align-item:flex-end; // item을 아래쪽으로 정렬
align-item:center; // item을 중앙으로 정렬
align-item:baseline; // 처음 item의 text를 기준으로 나머지 item을 정렬
align-self
앞서 언급한 align
관련 기능을 구현하는 것은 같지만
특정 item에만 적용 하고자 할 때 사용한다.
마지막으로
flexbox
기능을 공부하면서 찾아본 글, 영상 , 사이트 출처를 남긴다.
드림코딩 : https://www.youtube.com/watch?v=7neASrWEFEM
FLEXBOX FROGGY : https://flexboxfroggy.com/
CSS Tricks for Flexbox: https://css-tricks.com/snippets/css/a...
MDN Float: https://developer.mozilla.org/en-US/d...
MDN Flexbox: https://developer.mozilla.org/en-US/d...