[CSS] flex로 div 왼쪽 - 가운데 - 오른쪽 3등분하고 정렬하기

 

이전 포스팅에서는 flexbox의 기본개념과 flex의 속성에 대해 알아보았는데 이걸 사용해서 div를 3등분 또는 n등분으로 쉽게 나눌 수 있다.

부모 div에 flex 속성을 주고 비율 기입하는 방법으로 div를 나눌 수 있다.

 

1.방법

• 부모 div에 display : flex; 속성 부여
• 자식 div에는 저번 포스팅에서 적었던 것처럼 축약형으로 flex를 사용한다.
• 1)flex: 숫자; 형식으로 비율을 기입한다.
• 2)flex-basis: 크기; 형식으로 크기를 지정하는 방법도 있다.

 

*flex-grow값만 지정하는거고 나머지는 1 0으로 사용하는것이다.

*flex:2로 주면 (flex-grow:2, flex-shirnk:1, flex-basis:0)

 

 

flex 값은 flex-grow, flex-shrink, flex-basis 순서로 결정된다.

 

flex-grow : 양수로 하면 flex 항목이 넓어질 수 있다.

flex-shrink : 양수로 하면 flex 항목이 좁아질 수 있다.

flex-basis : flex항목이 넓어지거나 좁아질때 고려할 기준값이다.

 

---

 

2.코드 

<style>
.parent {
  display: flex;
  border: 2px dotted;
  padding: 6px;
}

.parent .child{
  flex: 1;
  text-align: center;
}

.left{
    background-color: beige;
}    
.center{
    background-color: aquamarine;
}
.right{
    background-color: burlywood;
}
</style>

<div class='parent'>
    <div class='child left'>왼쪽</div>
    <div class='child center'>가운데</div>
    <div class='child right'>오른쪽</div>
</div>

 

 

3.결과화면

 

1)비율을 1:1:1로 준 화면

 

2)비율을 2:1:2로 준 화면

 

 

 

자식 div의  flex값의 비율로 주기만 하면 되니 분할을 아주 쉽게 할 수 있다.

 

물론 이 flex 방법 말고도 table-cell이라던지 float를 적절히 분배해 div를 나누고 정렬하는 방법이 있다.

(내 이전 포스팅  참조)