[CSS] 문제의 div 정렬 - Flex

1. Flex 란

Flexible Box, Flexbox 라고 불리며, 레이아웃 배치 전용 기능으로 고안됨.

기존 레이아웃에 사용 되던 float / inline-block 등의 기존 방식보다 훨씬 효율적이고 편리한 기능들이 많음

 

2. Flex 적용 가능한 기본 HTML 구조

부모 (Flex Container) : div.container

자식 (Flex Item) : div.item

<div class = 'container'>
    <div class='item'> item 1 </div>
    <div class='item'> item 2 </div>
    <div class='item'> item 3 </div>
</div>

이미지 원본링크 : https://studiomeal.com/archives/197

 

3. 컨테이너(.container) 에 적용되는 속성들

/* 
아이템들은 기본적으로
'내용물'의 width 만큼 차지
'컨테이너'의 height 만큼 차지
*/

.container{
	display: flex; 
    display: inline-flex;
    
    /* 배치 방향 설정 */
    flex-direction : row; // 아이템들 가로 배치
    flex-direction : column; // 아이템들 세로 배치 (block 처럼)
    flex-direction : row-reverse; // 아이템들 역순 가로 배치
    flex-direction : column-reverse; // 아이템들 역순 세로 배치

	/* 줄넘김 처리 설정 */
    flex-wrap : nowrap; // 기본값 (칸이 없으면 사라짐)
    flex-wrap : wrap; // 다음 줄로 밀려남.
    flex-wrap : wrap-reverse; // 
    
    /* flex-flow : flex-direction + flex-wrap */
    flex-flow : row wrap;
    
    /* 메인축 방향 정렬 */
    justify-content : flex-start; // 시작점 정렬
    justify-content : flex-end; // 끝점 정렬
    justify-content : center; // 가운데 정렬
    justify-content : space-between; // 아이템들 간에 균일한 간격
    justify-content : space-around; // 아이템 둘레에 균일한 간격 만들어 줌
    justify-content : space-evenly; // 아이템과 양끝에 균일한 간격 만들어줌
    
    /* 수직축 방향 정렬 */
    align-items : stretch; // 영역 세로 전채
    align-items : flex-start; // 세로 초반 정렬 
    align-items : flex-end; // 세로 끝 정렬
    align-items : center; // 세로 가운데 정렬
    align-items : baseline; // 텍스트 베이스라인 기준 정렬 (글씨크기에 따라 높낮이 정렬)
}

 

4. 참고 링크

• https://studiomeal.com/archives/197 // Flex 정리 설명
• https://www.zerocho.com/category/CSS/post/5881edef636a7f0b8e8507d8 // CSS & Float