[CSS] Flex - Container 속성

 

before :

      flat, table tag, display: inline-block 수평 정렬 => 대체방법에 가까움. 완벽하지 x

 

inline-block 사용 예제

 

 

item 자체가 inline 화 되었기 때문에 </div> 에서 <div> 사이의 엔터키 친게 띄워쓰기로 인식되어서, 이렇게 item 들 사이에 간격이 생긴다

 

부모요소에서 font-size를 0으로 설정해 간격을 없애고, item에서 원하는 font-size를 재설정해야하는 번거로움이 있다.

 

 

float 사용예제 ( 수평정렬에 특화된 속성은 아니라 일종의 대체제 였다)

 

.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
.container{
  border: 2px solid red;
}
.container .item{
  width: 100px;
  height: 100px;
  border: 2px solid;
  border-radius: 10px;
  float: left;
}

 

 

after :

     flex 사용 예제 완벽~!

 

 

 

Flex (Flexible Box) : 수평 정렬 설정

Container : display flex가 부여된 요소.

자식 요소는 items을 정렬하기위해서는 부모요소 Container 필수

 

 

display

값	의미	기본값
flex	Block 특성의 Flex Container를 정의
inline-flex	Inline 특성의 Flex Container를 정의

 

 

예제 - 차이점!

flex 

flex : 기본적으로 block 요소처럼 수직으로 쌓임

 

inline-flex

inline-flex : 마치 인라인 요소같이 왼쪽에서 오른쪽으로 요소가 쌓임

 

*여기서 말하는 수직.수평 쌓임은 Items가 아니라 Container라는 것에 주의 

 

 

 

flex-flow : 주축, 줄바꿈 설정 단축 속성

 

값	의미	기본값
flex-direction	items의 주 축을 설정	row
inline-wrap	items의 줄 바꿈 설정	nowrap

 

flex-flow: 주축 줄바꿈;

.flex-container{
    flex-flow: row-reverse wrap;
}

 

 

flex-direction : items의 주 축을 설정

 

값	의미	기본값
row	→ 순서로 표시	row
row-reverse	← 순서로 표시
column	↓ 순서로 표시
column-reverse	↑ 순서로 표시

 

 

flex-wrap : items의 여러 줄묶음(줄바꿈) 설정

 

값	의미	기본값
nowrap	모든 items를 무조건 한줄에 표시(여러줄로 묶지 않음)	nowrap
wrap	items를 여러 줄로 묶음
wrap-reverse	items를 wrap의 역 방향으로 여러줄로 묶음

 

예제

felx-wrap: nowrap 은 컨테이너 크기가 가변할 수 있다

flex-wrap: wrap

 

 

 ※ 주축과 교차축

main-axis 주축: 수평, cross-axis 교차축: 수직

*상대적인개념이라 주축이 바뀌면 교차축도 바뀐다

 

주축이 시작~끝나는점 : flex-start(시작점) flex-end(끝점)

교차축이 시작~끝나는점 : cross-start(시작점) cross-end(끝점)

 

 

 

justify-content : 주축(수평축)의 정렬 방법 설정

 

값	의미	기본값
flex-start	items를 시작점으로 정렬	flex-start
flex-end	items를 끝점으로 정렬
center	items를 가운데 정렬
space-between	시작 item은 시작점에, 마지막 item은 끝점에 정렬, 나머지 tiems는 사이에 고르게 정렬
space-around	items를 균등한 여백을 포함하여 정렬

 

 

예제

 

flex-start

felx-end

center

sapce-beteween

sapce-around

 

 

align-content : 교차축(수직축)의 정렬 방법

*flex-wrap 속성을 통해 여러줄 이상이고 여백이 있는 경우만 사용 가능(한줄일경우 aline-items 속성 사용)

 

값	의미	기본값
stretch	Container의 교차 축을 (가득)채우기 위해 items를 늘림	stretch
flex-start	items를 시작점으로 정렬
flex-end	items를 끝점으로 정렬
center	items를 가운데 정렬
space-between	시작 item은 시작점에, 마지막 item은 끝점에 정렬, 나머지 tiems는 사이에 고르게 정렬
space-around	items를 균등한 여백을 포함하여 정렬

 

stretch 예제

 

 

 

align-items : 교차축의 items의 정렬 방법 설정. items가 한 줄일 경우 많이 사용.

* flex-wrap을 통해 2줄 이상일 경우 align-content 속성이 우선함

 

값	의미	기본값
stretch	Container의 교차 축을 (가득)채우기 위해 items를 늘림	stretch
flex-start	items를 각 줄의 시작점으로 정렬
flex-end	items를 각 줄의 끝점으로 정렬
center	items를 가운데 정렬
baseline	items를 문자 기준선에 정렬

 

예제

 

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">F</div>
</div>

.container{
  height: 400px;
  border: 4px solid;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline; /*문자를 기준으로 정렬*/
}
.container .item{
  width: 120px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  justify-content: center;/*수평정렬*/
  align-items: center;/*수직정렬*/
}
.container .item:nth-child(3){
  font-size: 50px;
}