본문 바로가기
css

Flexbox(CSS): 알아야 할 모든 것

by code-box 2022. 1. 31.
반응형

자, 이제 파티를 시작합시다.

(참고: 저는 실천을 통한 학습을 믿습니다. 따라서 이 기사에서 최대한의 가치를 얻으려면 코드 편집기를 열고 기사의 코드를 복사하여 붙여넣어 마법이 일어나는 것을 볼 것을 제안합니다.)

Flexbox는 유연한 상자를 의미합니다. 용기의 항목을 쉽고 효율적으로 정렬할 수 있는 방법을 제공합니다.

Flex 항목: 정렬하려는 요소입니다.

 

Flex 컨테이너: 이러한 Flex 항목을 포함하는 상위 컨테이너입니다.

주축: 플렉스 아이템을 정렬하려는 축입니다.

교차 축: 축은 주축에 수직입니다.

이해를 높이기 위해 flexbox 속성을 두 부분으로 나눕니다.

(1) 플렉스 컨테이너에 적용되는 특성:

 
          (a) flex-direction
          (b) flex-wrap
          (c) justify-content
          (d) align-items

(2) 플렉스 항목에 적용되는 속성:

              (a) order
                            (b) flex-grow
              (c) flex-shrink

참고: 위의 모든 속성을 적용하려면 상위 컨테이너에서 "display: flex"를 설정해야 합니다.

아래는 다양한 속성을 적용할 기본 코드입니다.

 
<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

basecode.PNG

플렉스 용기에 적용되는 특성에 대해 알아보겠습니다.

(1a) 유연성 방향:

플렉스 항목을 정렬할 방향을 제공합니다.

 
<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             flex-direction: row;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

flex-direction row.PNG

"p"는 블록 수준 요소이지만, "flex-direction: row"를 주자마자 모든 flex-direction은 수평으로 배열된다. 기본적으로 플렉스 방향은 행으로 설정되어 있으므로 동일한 값을 제공하지 않더라도 작동합니다("display: flex"를 설정해야 함).

아래 예에서는 "가변 방향: 행-후진"을 설정합니다.

flex-direction row-reverse.PNG

 
other than those depicted above, there are other flex directions as well: 
     column
          column-reverse

I advise you to try these out on your own.

(1b) 플렉스 레인지

이것은 웹 앱이 뷰 포트의 크기에 따라 플렉스 항목을 조정하여 오버플로를 방지함으로써 모든 장치(노트북, iPad, 전화 등)에서 렌더링할 수 있는 매우 중요한 속성입니다. 기본적으로 플렉스 랩은 "nowrap" 값으로 설정됩니다.

아래 예에서는 "플렉스-랩: 랩"을 사용합니다.

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             flex-wrap: wrap;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>
 

Image description

또한 뷰포트 너비가 감소함에 따라 아래로 떨어지는 항목 대신 위로 올라가는 "플렉스-랩: 랩-후진"도 있습니다. 한 번 해보세요.

(1c) 정당성-내용

내용을 정당화함으로써, 우리는 주요 축을 가로질러 플렉스 항목을 이동할 수 있습니다. justice-content의 기본값은 flex-start입니다.
아래 예에서는 "justify-content: center"를 사용합니다.

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             justify-content: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>
 

justify-content center.PNG

"주요 콘텐츠: 스페이스 어라운드"의 결과를 살펴보겠습니다.

justify-content space-around.PNG

Now, I would nudge you to try out other properties of justify-content such as:
flex-start
flex-end
space-between
space-evenly

(1d) 정렬-고정:

 

정렬 항목 특성은 컨텐츠가 주축을 따라 정렬되는 것처럼 플렉스 컨테이너 내의 항목을 교차 축을 따라 정렬합니다.
"내용 정당화: 공간 공간 구성"과 "항목 정렬: 중심"이 함께 작동하는 것을 살펴보겠습니다.

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             justify-content: space-around;
                                             align-items: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

align-items center.PNG

정렬 항목의 기본값은 플렉스 컨테이너의 교차 축에 걸쳐 플렉스 항목이 펼쳐지도록 하는 스트레치입니다(그러나 플렉스 항목이 높이를 할당하지 않은 경우 작동함). 한 번 해보세요.

이제, 어떻게 "align-Items: center"가 정당한 내용 없이 작동하는지 살펴보겠습니다.

 
<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             align-items: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

align-items center 1.PNG

이제 플렉스 아이템에 적용되는 속성을 이해하겠습니다.

(2a) 주문

주문 속성은 단일 숫자로 지정됩니다. 우리는 주문 속성을 사용하여 플렉스 아이템의 순서를 변경할 수 있습니다. 기본적으로 모든 플렉스 항목은 "순서 0"을 가집니다.
차수가 클수록 주축을 따라 원소가 멀어지는 것이다.
다음 예를 보겠습니다.

 
<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             align-items: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }

        .child:nth-child(2){
                      order: 2;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

플렉스-아이템 B에 순서 2를 부여했기 때문에, 이것은 맨 오른쪽으로 밀리고, 만약 어떤 다른 플렉스아이템이 순서 3을 가지고 있다면, 그것은 플렉스-아이템 B 다음에 쌓일 것입니다. 그러나 모든 플렉스 항목의 순서가 같으면 효과가 없습니다(2번, 3번 또는 다른 숫자라도 상관 없음).

order.PNG

(2b) 플렉스 성장

flex-grow 속성은 단일 숫자로 지정됩니다. Flex-grow는 소유하기에 놀라운 재산입니다. 플렉스 컨테이너의 기본 축에 걸쳐 남아 있는 공간의 양을 항목(플렉스 성장 비율)에 지정합니다.

 

예를 들어 이것을 이해해보자.

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             align-items: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }

        .child:nth-child(4){
                      flex-grow: 1;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

여기서는 flex-grow 항목 D에 "flex-grow: 1"을 할당하고 나머지 공간을 모두 차지하는 것을 확인했습니다.

flex-grow 1.PNG

모든 형제 항목이 동일한 플렉스 성장 인자를 가지면 모든 항목이 동일한 공간 공유를 받게 되며, 그렇지 않으면 다른 플렉스 성장 인자에 의해 정의된 비율에 따라 분배됩니다.

 

다른 예를 들어 이것을 이해해보자.

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             align-items: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }

        .child:nth-child(4){
                      flex-grow: 1;
        }

        .child:nth-child(3){
                      flex-grow: 2;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

여기서는 "Flex-grow: 2"와 "Flex-grow: 1"을 Flex-tem D에 할당하고 나머지 공간이 다양한 Flex-grow 인자에 의해 정의된 비율(C:D = 2:1)에 따라 배분되는 것을 확인했습니다.

flex-grow 2.PNG

(2c) 플렉스 레인지

 

flex-shrink 속성은 flex 항목의 flex shrink 계수를 설정합니다. 모든 플렉스 항목의 크기가 플렉스 컨테이너보다 크면 플렉스 축소에 따라 항목이 축소됩니다.

화면 크기(뷰 포트)가 증가할 때 플렉스 항목이 특정 방식으로 동작하도록 하는 플렉스 성장과 달리, 플렉스 축소는 뷰 포트가 감소할 때 플렉스 항목의 동작을 돕는다.

예를 들어 이해하겠습니다(플렉스-항목 C에 "플렉스-수축: 3"을 부여하고 어떤 일이 일어나는지 보겠습니다).

<!DOCTYPE html>
  <html lang="en">
    <head>
        <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
                          <title>Document</title>

    <style>
                               div{
                                             background-color: blue;
                                             border: 2px solid black;
                                             height: 400px;
                                             display: flex;
                                             align-items: center;
                               }

        .child{
                      background-color: pink;
                      border: 2px solid black;
                      height: 50px;
        }

        .child:nth-child(3){
                      flex-shrink: 3;
        }
    </style>
</head>
<body>
          <div>
              <p class="child">flex-item A</p>
        <p class="child">flex-item B</p>
        <p class="child">flex-item C</p>
        <p class="child">flex-item D</p>
    </div>
</body>
</html>

Image description

 

여기서 플렉스 수축 계수는 3의 플렉스 수축 계수를 "플렉스 항목 C"로 설정하며, 그 결과 화면이 작아질수록 플렉스 항목 C는 다른 플렉스 수축 계수에 비해 3배 빠르게 축소됩니다.

저는 웹 개발(주로 CSS, JS, 리액트)과 관련된 기사를 매일 한 편씩 쓰고 있는데, 맞습니다: 매일매일. 만약 당신이 같은 것을 배우고 있다면 dev.to과 트위터에서 저를 팔로우하세요.

내 트위터 핸들: @therajatg

Linkedin 유형인 경우 https://www.linkedin.com/in/therajatg/에 연결합니다.

의 앞날을 멋지게 보내십시오!

 
저작자표시

'css' 카테고리의 다른 글

'Voir plus', fair un ellipsis personnalisé comment fair un 줄임말  (0) 2022.01.31
나는 나의 첫 번째 웹사이트를 만들었는데, 이 사이트는 HTML 양식에서 이메일로 답변을 보냅니다.  (0) 2022.01.31
CSS 포지션 절대 대 상대 쉬운 방법!  (0) 2022.01.31
7 2022년 웹 사이트에 가장 적합한 글꼴  (0) 2022.01.31
컨셉토스 바시코스 드 CSS  (0) 2022.01.31

관련글

댓글

티스토리툴바