#25 - CSS - Flex

Flex란

한뱡향 1파원에 대한 레이아웃 시스템. 여러 item을 감싸는 container로 구성되어 있다.

 

<!-- Flex 사용시 기본 구조 -->
<div class="container">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
</div>

 

 

.container{
    display : flex;
    flex-flow : row nowrap;
}
/* 증가너비 감소너비 기본너비 */
.item1{
    flex : 1 2 300px;
}
/* 증가너비 감소너비 */
.item2{
    flex : 2 1;
}

속성 설명

적용 위치	속성	개별 속성	의미	값
Flex Container	display		item 수평 정렬 속성 부여. flex와 inline-flex 설정 값에 따라 Container가 어떤 속성을 가질지 설정 가능 1. flex : Block 속성을 flex 부여 2. inline-flex : inline 속성을 flex 부여	flex , inline-flex block, inline, inline-block, flex, table, table-cell, none
	flex-flow	-
		flex-direction	item의 메인축 설정 row : 왼쪽->오른쪽 수평 정렬.  row-reverse : 오른쪽->왼쪽 수평 정렬 column : 위->아래 수직 정렬 column-reverse : 아래->위 수직 정렬	row, row-reverse, column, column-reverse
		flex-wrap	item 줄 바꿈 설정 nowrap : 한줄로 표시. 기본값. item의 가로값 가변됨 wrap : 여러줄 표시 wrap-reverse : 반대 방향으로 여러줄 표시	nowrap, wrap, wrap-reverse
	justify-content		메인축의 정렬 방법 설정 flex-start : 시작점으로 정렬 flex-end : 끝점으로 정렬 center : 가운데 정렬 space-between : 시작/끝점 양측 정렬 space-around :  : 동일 여백을 포함하여 정렬 space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줌	flex-start, flex-end, center, space-between, space-around, space-evenly
	align-content		item이 여러줄일 경우, 교차 축의 정렬 방법 설정 stretch: 교차 축을 채우기 위해 item 가로/세로 너비를 늘림	stretch, flex-start, flex-end, center, space-between, space-around
	align-items		item이 한줄일 경우, 교차 축의 정렬 방법 설정 baseline : Item을 문자들의 아랫 선을 기준으로 정렬	stretch, flex-start, flex-end, center, baseline
Flex Item	order		Item 순서 설정	숫자
	flex	-	Item의 증가 감소 기본 너비 비율 설정	flex-basis 기본값 0 개별 속성과 기본값이 상이함
		flex-grow	Item 증가 너비 비율 설정	기본값 0, 숫자
		flex-shrink	Item 감소 너비 비율 설정	기본값 1, 숫자
		flex-basis	Item 기본 너비 비율 설정 0 설정 시 컨텐츠 내용에 상관없이 flex-grow 적용 됨	기본값 auto, 숫자
	align-self		교차 축에서 Item의 정렬 방법 설정

 

 

#참고 글

studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자