display : flex 정리

레이아웃을 구성할 때 자주 사용한 flex에 대해 정리하고자 한다.

flexbox는 grid와 다르게 1차원 레이아웃으로 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다.

display : flex

display : flex 를 적용하면 일렬로 아이템들이 배치된다.

See the Pen flex by pminsun (@pminsun) on CodePen.

flex-direction

flex-direction으로 배치 방향을 변경 할 수 있다.

• row : 가로 방향 정렬
• row-reverse : 가로 방향 반대 순으로 정렬
• column : 세로 방향 정렬
• column-reverse : 세로 방향 반대 순으로 정렬

See the Pen flex-direction by pminsun (@pminsun) on CodePen.

flex-wrap

자식 아이템들이 부모 컨테이너 영역 보다 많을 경우 flex-wrap: wrap ****을 적용하면 자동 줄 바꿈을 해준다. ( 기본 값 : flex-wrap: nowrap )

See the Pen flex-wrap by pminsun (@pminsun) on CodePen.

justify-content : 수평 방향 정렬

수평 방향으로 정렬해주는 CSS

• flex-start : 축의 시작 부분에 정렬 ( 기본 값 )
• flex-end : 축의 끝 부분에 정렬
• center : 항목들을 축의 중심 부분에 정렬 ( 중앙 정렬 )
• space-between : 항목들을 고르게 정렬 양 끝에 첫 번째, 마지막 항목이 붙음
• space-around : 항목들을 고르게 정렬 각 항목들은 양쪽 여백의 절반만큼 나누어 갖음
• space-evenly : 항목들을 고르게 정렬 각 항목들은 동일한 여백을 갖음

See the Pen justify-content by pminsun (@pminsun) on CodePen.

align-items : 수직 방향 정렬

수직 방향으로 정렬해주는 CSS

• stretch : Container를 채우기 위해 수직 방향으로 늘림 ( 기본 값 )
• flex-start : 수직 방향에 위쪽 정렬
• flex-end : 수직 방향에 아래쪽 정
• center : 수직 방향 가운데 정렬

See the Pen align-items by pminsun (@pminsun) on CodePen.

 

중앙 정렬

justify-content:center; & align-items: center; 적용하면 중앙에 위치 시킬 수 있다.

 

See the Pen flex-center by pminsun (@pminsun) on CodePen.

flex ( flex-grow, flex-shrink, flex-basis )

flex는 flex-grow, flex-shrink, flex-basis의 단축 속성이다.

• flex-grow : 부모 요소 내부에서 할당 가능한 Item의 너비 비율을 설정
• flex-shrink : 부모 요소보다 클 때 사용되며 부모 요소 내부에서 Item의 크기가 축소됨
• (flex-shrink를 0으로 설정하면 아이템의 크기가 width값 보다 작아지지 않음)
• flex-basis : Item의 초기 크기 지정

 

See the Pen flex by pminsun (@pminsun) on CodePen.

order

item 순서 지정 해준다. 숫자가 작을 수록 앞 순서이다. ( ‘ - ‘ 도 가능)

order: 0; 0 부분에 숫자 입력하면 됨

 

 

See the Pen order by pminsun (@pminsun) on CodePen.

align-self

전체 item이 아닌 특정 items만 정렬 방법을 바꾸고 싶을 때 사용하여 align-items 보다 우선순위이다

• auto : align-items 속성 상속 ( 기본 값 )
• stretch : Container를 채우기 위해 수직 방향으로 늘림 ( 기본 값 )
• flex-start : 수직 방향에 위쪽 정렬
• flex-end : 수직 방향에 아래쪽 정
• center : 수직 방향 가운데 정렬

 

See the Pen align-self by pminsun (@pminsun) on CodePen.

 

참고

flex - CSS: Cascading Style Sheets | MDN