[CSS] Flexbox

노유성·2023년 6월 21일

⭐Flexbox 이전

container 안에서 item들의 위치를 지정하거나 item들 사이의 관계에 대해서 나타내기 위해 예전에는 float 속성을 사용했다.

🪐float 속성

CSS의 float 속성은 요소를 좌우 방향으로 부유(floating)시키는 데 사용됩니다. 주로 텍스트나 이미지와 같은 컨텐츠 요소를 웹 페이지에서 원하는 위치에 배치하기 위해 활용됩니다. float 속성은 과거에는 웹 페이지 레이아웃을 조정하는 주요 방법 중 하나였지만, 최신 CSS 레이아웃 기술에 비해 제한적이기 때문에 요즘은 덜 사용됩니다.
float 속성을 사용하면 요소가 왼쪽 또는 오른쪽으로 이동하여 다른 요소가 그 주위로 흐르게 할 수 있습니다. 이를 통해 요소를 텍스트 주위로 감싸거나 여러 요소를 나란히 배치하는 등의 레이아웃을 생성할 수 있습니다.
-chatGPT

⭐실습

html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
    <div class="item item10">10</div>
  </div>
</body>
</html>

css

.container {
  background: beige;
  height: 100vh;
}

.item {
  
}

.item1 {
  background: #FF0000
}
.item2 {
  background: #FF5E00
}
.item3 {
  background: #FFBB00
}
.item4 {
  background: #FFE400
}
.item5 {
  background: #ABF200
}
.item6 {
  background: #ABF200
}
.item7 {
  background: #00D8FF
}
.item8 {
  background: #0054FF
}
.item9 {
  background: #0100FF
}
.item10 {
  background: #5F00FF
}

🌈html 코드 간단하게 작성하기

위와 같은 html 코드를 작성할 때는

div.container>div.item.item ${$ }*10

라고 작성하면 한 번에 코드를 작성할 수 있다.

🌈vh

부모에 관계없이 보이는 view의 몇 퍼센트를 차지할 것인지를 나타내는 단위가 vh이다. %를 이용하면은 부모를 기준으로 얼마나 차지할 것인지를 나타낸다.

🪐container에 적용할 수 있는 속성

🌠display: flex

container에 적용할 수 있는 속성값이며 해당 container에게 '너는 지금부터 flexbox야' 라고 명시하는 것이다.

🌠flex-direction

flexbox 안에서 item들을 어떤 축으로 어떤 순서로 나열할 것인지를 적용할 수 있는 속성이다.
기본 값은 row 이며 좌측에서 우측으로 정렬하게 된다. row-reverse를 사용하면

우측에서 좌측으로 정렬한다.

반대로 중심축을 row축이 아니라 column축으로 하고 싶다면 속성값에 column을 주면 된다. 그러면 아래와 같이 된다.
column-reverse도 같이 동작한다.

🌠flex-wrap

화면의 크기가 작아지면 줄바꿈을 허용할 것인지에 대한 속성이다.

기존에는 화면의 크기가 작아지면 item들도 어쩔 수 없이 같이 작아진다.

하지만 flex-wrap의 속성값을(기본적으로는 nowrap) wrap으로 바꿔주면

줄바꿈이 됨을 알 수 있다. 위에서부터 아래로 쌓이는데 아래에서부터 위로 쌓이게 wrap-reverse도 가능하다.

🌠flex-flow

위 두 가지 속성의 단축속성이다.

🌠justify-content

기본값은 flex-start이며 item들이 시작하는 시점이 왼쪽 축으로 지정한다.
만약에 flex-end로 설정하면

item이 끝나는 지점이 오른쪽 축으로 지정된다.

space-around 라는 속성값도 존재하는데 margin과 비슷하게 item마다 부모 container와 형제 item들과 같은 간격을 두고 정렬하는 것이다.

여기서 양 끝은 다른 간격에 비해 조금 좁은 간격인데 이 마저도 같은 간격으로 유지하고 싶다면 space-evenly를 통해서 같은 간격을 유지할 수 있다.

양 끝은 간격을 주지 않고 싶다면 space-between 이라는 속성값을 주면 된다.