[TIL 6][CSS] Flex - Flex Container

15734 단어 TIL CSS CSS

0. 개요

CSS에 flex가 탄생하기전에는 요소를 정렬할 때 margin을 사용해서 정렬을 하곤했다. 하지만 margin을 이용해서 하나하나 정렬을 하려면 뭔가 변경된 사항이 생길때마다 해당 요소에 대한 margin을 하나하나 바꾼다는것은 여간 귀찮은일이 아닐수 없다.
그러한 귀찮은 작업을 간편하게 해주는것이 flex이다.

<div class="father">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

기존엔 박스 하나 하나에 비율(%)을 정해줘서 정렬을 하곤 했는데, 만약에 상자가 하나 더 추가되거나 제거되면 비율을 또 다시 맞춰야하는 번거로움이 생긴다. 하지만 flex를 사용하면 그러한 번거로움을 해소할 수 있다.

1. flex 사용

flex를 사용하기 위해서는 정렬될 대상에게 flex 속성을 주는것이 아닌 대상의 부모 요소에게 display:flex 속성을 주어야한다.

속성을 주어주면 자식들은 flex-item이 되고 부모와 함께 flex-container를 형성한다.

위의 그림 같은 경우는 아래와 같이 .father에게 flex 속성을 주고 수평 정렬을 설정하는(flex-direction이 row일 경우) justify-content 속성에게 space-between을 주어주면 위 처럼 정렬이 된다.

<div class="father">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

.father{
    display: flex;
    justify-content: space-between;
}

.box {
    width: 300px;
    height: 300px;
    background-color: blue;
}

2. Axis

flex는 Axis 즉, 축에 따라 정렬하는 방법이 결정된다.
뒤에서 후술할 flex-direction에 따라 축이 변하는데, 기본값으로 flex-direction은 row 즉 수평으로 설정되어 있다. 수평일 때 수평 정렬을 담당하는 설정값으로 justify-content가 있고, 수직을 담당하는 align-items가 있다.
그런데 flex-direction을 column 즉 수직으로 변경한다면, Main-Axis 축의 변경으로 인하여justify-content는 수직 정렬, align-items는 수평 정렬을 담당하게 된다.

flex-direction	justify-content	align-items
row	수평	수직
column	수직	수평

3. flex-direction

위에서 언급한것처럼 flex-direction이라는 속성이 있다.

row

row는 좌에서 우로 수평 배치되고, flex-direction의 기본값이다.

row-reverse

row-reverse는 row와 반대로 우에서 좌로 수평 배치된다.

column

column은 위에서 아래로 수직 배치된다.

column-reverse

column-reverse는 아래에서 위로 수직 배치된다.

4. flex-wrap

flex-wrap은 flex-container의 width보다 flex item들의 width의 합계가 더 큰 경우 그것을 한줄로 나타낼것인지 혹은 여러줄로 나타낼것인지 지정하는 속성이다.
flex-wrap의 기본값은 nowrap인데, 이것을 한 행에 flex item들을 배치하는 속성이다.
이 때, flex item들은 flex container에 들어갈 수 있는 크기로 축소된다.

<div class="father">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
</div>

.father {
    display: flex;
    width: 500px;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: red;
}

.box {
    width: 100px;
    height: 50px;
    background-color: rgba(0, 0, 255, 0.3);
    text-align: center;
    font-size: 30px;
}