[HTML/CSS] Flexbox

flexbox를 사용해보자.

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
  </div>

.flex-item{
  width: 100px;
  height: 100px;
  background-color: gray;
  margin: 5px;
}

이런 식으로 있을 때 가로로 배치하고 싶다면?
가로 배치하려는 태그들의 부모에다가 display:flex를 적용 시키면 된다.

.flex-container{
  display: flex;
}

만약 여기서 꽉 채우고 싶다면아래처럼 또 flex-item의 width를 100%로 바꿔보자.

width: 700px;로 적용시켜도 똑같은 것을 확인할 수 있다.

이유는 실제로 그 만큼 차지하는 것은 못하지만 최대한 그만큼 차지하는 공간을 잡아먹기 위해 노력하기 때문이다.(노오오력?!)

다시 100px로 바꿔주고 가운데 정렬을 하려면 아래처럼.

.flex-container{
  display: flex;
  justify-content: center;
}

가로로 배치했지만 세로로 배치하고 싶다면??

.flex-container{
  display: flex;
  flex-direction: column;
}

위 처럼 하면 된다.
이를 잘 활용하면 반응형으로 pc에서는 가로배치 모바일에서는 세로배치로 적용할 수도 있다.

또한 크기가 넘치면 그냥 꽉차게 되는데 아래의 flex-wrap을 적용시키면 아래처럼 보이게 된다.

.flex-container{
  display: flex;
  flex-wrap: wrap;
}
.flex-item{
  width: 400px;
  height: 100px;
  background-color: gray;
  margin: 5px;
}

상하 정렬을 해보고 싶다면???

.flex-container{
  display: flex;
  height: 500px;
}
.flex-item{
  width: 400px;
  height: 100px;
  background-color: gray;
  margin: 5px;
}

아래처럼 align-items를 이용 가능하겠다.

.flex-container{
  display: flex;
  height: 500px;
  align-items: center;
}
.flex-item{
  width: 400px;
  height: 100px;
  background-color: gray;
  margin: 5px;
}

만약 현재 박스 중 2번 박스를 키우고 싶다면?

  <div class="flex-container">
    <div class="flex-item" style="flex-grow: 1;">1</div>
    <div class="flex-item" style="flex-grow: 2;">2</div>
    <div class="flex-item">3</div>
  </div>

flex-grow를 사용할 수 있는데, 이를 사용하면 flex-grow가 있는 것들 끼리 서로가 서로의 몇 배수 차이 만큼의 공간을 차지하게 하는 방식이다.

flex와 관련된 것을 연습해보고 싶다면
flexboxfroggy를 이용해보자.