13. 플렉스 박스 레이아웃

-플렉스 박스 레잉아웃(Flexible Box Layout=Flex Box Layout) : 1차원 방식 레이아웃 설계에 고안된 스타일 속성

-다양한 상황에서 유연하게 레이아웃을 구성한다는 뜻

1. 플렉스 박스 레이아웃 훑기

- 구성 요소

• 주축(main axis) : 플렉스 박스 진행 방향과 수평한 축
• 교차축(cross axis) : 주축과 수직한 축
• 플렉스 컨테이너(flex container) :display 속성값으로 flex나 inline-flex가 적용된 요소
• 플렉스 아이템(flex item) : 플렉스 컨테이너와 자식관계를 이루는 태그 구성 요소

-레이아웃 확인법

 크롬 개발자 도구의 경우 플렉스 박스 레이아웃이 적용된 요소는 flex 아이콘이 표시됨

 클릭하면 레이아웃 시각적으로 확인 가능

 

-기본 형식

  <div class="flex-container">
    <div class="flex-item">item-1</div>
    <div class="flex-item">item-2</div>
    <div class="flex-item">item-3</div>
    <div class="flex-item">item-4</div>
  </div>

.flex-container{
  width:300px;
  height:200px;
  background-color:#c4c4c4;
  border:1px solid black;
}
.flex-item{
  color:white;
  background-color:#ff5252;
}
.flex-item:nth-child(2n){
  background-color:#bf5e5e;
}

 

2. 기본 속성

1) display 속성

- 플렉스 박스 레이아웃은 display 속성값을 flex 또는 inline-flex로 지정해야만 함

/* 형식 */
display:flex;
display:inline-flex;

-flex: 요소의 다음요소가 항상 줄 바꿈 됨

-inline-flex: 다음 요소가 주변에 배치됨

-플렉스 아이템은 원래 박스 성격(인라인,블록,인라인블록)은 무시되고 수직 혹은 수평으로 배치됨

2) flex-direction 속성

- 플렉스 박스 레이아웃의 주축 방향을 결정

 

/* 형식 */
flex-direction: 속성값;

-  사용하는 속성값은 다음과 같다

• row : 주축 방향이 왼->오
• row-reverse : 주축 방향이 오->왼
• column : 주축 방향이 위->아래
• column-reverse : 주축 방향이 아래->위

-플렉스박스 레이아웃의 기본값은 row임

3) flex-wrap 속성

- 플렉스 아이템이 컨테이너 영역 벗어날 때 어떻게 처리할지를 결정

- 기본값은 nowrap임

/* 형식 */
flex-wrap: 속성값;

-사용 가능한 속성은 다음과 같음

• nowrap : 아이템이 컨테이너 벗어나도 무시
• wrap : 아이템이 컨테이너 벗어나면 줄 바꿈
• wrap-reverse : 아이템이 컨테이너 벗어나면 wrap 역방향으로 줄 바꿈

4) flex-flow 속성

- flex-direction, flex-wrap 한번에 사용하게 해주는 속성

/* 형식 */
flex-flow: flex-direction flex-wrap;

/* 예시 */
 flex-flow: row nowrap;

3. 정렬 속성

-플렉스 아이템을 정렬하는 속성들

1) justify-content 속성

- 주축 방향으로 정렬할 때 사용

/* 형식 */
justify-content: 속성값;

-사용 가능한 속성값은 다음과 같음

• flex-start : 주축 방향의 시작 기준 정렬
• flex-end : 주축방향의 끝 기준 정렬
• center : 주축 방향의 중앙 정렬
• space-between : 플렉스 아이템 사이 간격 균일하게 정렬
• space-around : 플렉스 아이템과 근처 여백을 하나의 직사각형으로 볼 때, 각각의 둘레가 균일하게 정렬
• space-evenly : 플렉스 아이템 사이와 양끝 간격이 균일하게 정렬

2) align-items,align-content,align-self 속성

-align items속성 : 플렉스 아이템 교차축 방향 정렬에 사용

/* 형식 */
align-items: 속성값;

속성값은 다음과 같음

• stretch : 교차축 방향으로 플렉스 아이템 너비나 높이 늘어남
• flex-start : 교차축 방향의 시작을 기준으로 정렬
• flex-end : 교차축 방향의 끝을 기준으로 정렬
• center : 교차축 방향의 중앙을 기준으로 정렬
• baseline : 플렉스 아이템의 baseline기준 정렬

-align-content 속성 : 플렉스 아이템이 두줄이상일 때 사용 플렉스 아이템 교차축 방향 정렬에 사용

/* 형식 */
align-content:속성값;

속성값은 align-items와 동일

-align-self : 아이템을 각각 정리하고 싶을 때 

/* EXAPLE */
.flex-item:nth-child(1){
	align-self:flex-start;
}
.flex-item:nth-child(2){;
	align-self:flex-end;
}
.flex-item:nth-child(3){
	align-self:center;
}
.flex-item:nth-child(4){
	align-self:baseline;
}