[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 : 기본적으로 block 요소처럼 수직으로 쌓임
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의 역 방향으로 여러줄로 묶음 |
예제
※ 주축과 교차축
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를 균등한 여백을 포함하여 정렬 |
예제
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;
}
