FLEXBOX

SeungMin·2022년 7월 4일
0

FELXBOX란?


페이지를 만들면서 각각의 콘텐츠를
내가 원하는 방향이나 위치에 정렬시키기 위해서는
position float table 과 같은 기능을 복잡하게 구성해야 했다.
flexbox 는 이러한 복잡한 구성을 간단하게 구현 가능하게 해준다.


CONTAINER 와 ITEM


flexbox 기능을 사용하기 위해서는 containeritem의 관계를 이해해야 한다.


<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-directionflex-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-contentflex-wrapwrap으로 두고 있을 때
그리고 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...

profile
공부기록

0개의 댓글