CSS_flexbox(1) 수평정렬

flexbox

부모요소 내의 자식요소들에 대한

공간 배분, 정렬을 할 수 있는 모델이다!

 

css에서 레이아웃을 구성할 때 float을 이용하였지만

최근에는 flex를 점점 많이 사용하는 추세이다.

 

사실 호환성문제로 사용 수가 적었는데 많이 해결이 되었다고 한다.

 

점점 늘어나는 사용자 수!

---

수평정렬

다른 방법들과의 비교

 

먼저 기존에 다뤘던 것들을 살펴보자!

 

1. float

<div class="container clearfix">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
</div>

 

.container{
    width: 400px;
    border: 1px solid #000;
    /* overflow: hidden; */ /*이 속성을 이용해도 된다.*/
}
.item {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: gold;
    border-radius: 5px;

    float: left;
}
.clearfix::after{ /*다음에 오는 요소가 없어도 사용가능하도록!*/
    clear:both;
    content: "";
    display: block;
}

기존에 다뤘던 내용인 float를 이용하여

수평정렬을 할 수 있는데

 

이 경우에는 부모요소에 clearfix

즉, clear 속성을 이용해 float을 해제 시켜주면서

자식요소를 감싸는 것처럼 보이게 할 수 있다.

(overflow: hidden도 같은 효과를 낼 수 있다!)

 

---

2. inline-block

 

inline-block 요소는 수평정렬이 가능하므로

display를 이용해 block -> inline-block 으로 변환하면

.container{
    width: 400px;
    border: 1px solid #000;
}
.item {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: gold;
    border-radius: 5px;
    display: inline-block;
}

위와 같은 결과가 나온다.

 

수평정렬이 되긴 하지만

미묘한 공백.. 이 녀석이 눈엣가시이다

 

이를 해결하려면 

margin값을 -(음수)로 적용을 하는 등의

세부적인 조정이 필요하다.

 

---

3. flex

.container{
    width: 400px;
    border: 1px solid #000;
    display: flex;
}
.item {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: gold;
    border-radius: 5px;
}

오늘의 주인공 flex를 이용하면

부모요소에 단 한 줄만으로 원하는 결과를 얻을 수 있다!