문서의 이전 판입니다!

CSS Flexbox - Flex Items

description : CSS Lists,
author : 오션
email : shlim@repia.com
lastupdate : 2021-07-16

The source of this article

Child Elements (Items)

flex container의 직계 자식 요소들은 자동으로 flexible (flex) items가 됩니다.

위의 요소는 그레이 컬러의 flex container 내부에 4개의 블루 컬러의 flex items를 나타냅니다.

<style>
  .flex-container {
    display: flex;
    background-color: #f1f1f1;
  }
 
  .flex-container > div {
    background-color: Dodgerblue;
    color: #fff;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>
 
  <h1>Flexible Items</h1>
 
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
 
  <p>All direct children of a flexible container becomes flexible items.</p>
</body>
</html>

flex item 속성들은 하기와 같습니다.

order
flex-grow
flex-shrink
flex-basis
flex
align-self

The order Property

order 속성은 flex items의 순서를 지정합니다.

코드 상의 첫 번째 flex item은 레이아웃에서 첫 번째 아이템으로 나타날 필요는 없습니다.
order값은 숫자이어야 하고, 기본 값은 0 입니다.

Example

/order/ 속성은 flex items의 순서를 변경할 수 있습니다.

  <style>
    .flex-container {
      display: flex;
      align-items: stretch;
      background-color: #f1f1f1;
    }
 
    .flex-container>div {
      background-color: Dodgerblue;
      color: white;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
 
<body>
 
  <h1>The order Property</h1>
 
  <p>Use the order property to sort the flex items as you like:</p>
 
  <div class="flex-container">
    <div style="order: 3">1</div> <!-- 1번 박스를 세 번째로 -->
    <div style="order: 2">2</div> <!-- 2번 박스를 두 번째로 -->
    <div style="order: 4">3</div> <!-- 3번 박스를 네 번째로 -->
    <div style="order: 1">4</div> <!-- 4번 박스를 첫 번째로 -->
  </div>
 
</body>

The flex-grow Property

flex-grow 속성은 어떤 하나의 flex item이 나머지 flex items에 비례하여 얼마나 많이 확장될 수 있는 지를 지정합니다.

값은 숫자이어야 하며, 기본 값은 0입니다.

  <style>
    .flex-container {
      display: flex;
      align-items: stretch;
      background-color: #f1f1f1;
    }
 
    .flex-container>div {
      background-color: dodgerblue;
      color: white;
      margin: 10px;
      /* 박스의 너비가 지정되지 않았습니다. */
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
 
</head>
 
<body>
  <h1>The flex-grow Property</h1>
 
  <p>Make the third flex item grow eight times faster than the other flex items:</p>
 
  <div class="flex-container">
    <div style="flex-grow: 1">1</div>
    <div style="flex-grow: 1">2</div>
    <div style="flex-grow: 8">3</div>
    <!-- 3번 박스는 브라우저 창의 너비와 상관없이 항상 1번, 2번 박스에 비해 8배 너비를 유지합니다. -->
  </div>
</body>

The flex-shrink Property

flex-shrink 속성은 어떤 하나의 flex item이 나머지 flex item에 비례하여 얼마나 많이 축소될 수 있는 지를 지정합니다.

값은 숫자이어야 하며, 기본 값은 1 입니다.

Example

세 번째 flex item이 나머지 다른 flex items만큼 축소되지 않게 하는 예제입니다

  <style>
    .flex-container {
      display: flex;
      align-items: stretch;
      background-color: #f1f1f1;
    }
 
    .flex-container>div {
      background-color: dodgerblue;
      color: white;
      width: 100px;
      margin: 10px;
      text-align: center;
      line-height: 75px;
      font-size: 30px;
    }
  </style>
</head>
 
<body>
  <h1>The flex-shrink Property</h1>
 
  <p>Do not let the third flex item shrink as much as the other flex items:</p>
 
  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div style="flex-shrink: 0">3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
  </div>
</body>

오션,, CSS, Flexbox, Flex, items

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

CSS Flexbox - Flex Items

The source of this article

Child Elements (Items)

The order Property

Example

The flex-grow Property

The flex-shrink Property

Example

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

CSS Flexbox - Flex Items

The source of this article

Child Elements (Items)

The order Property

Example

The flex-grow Property

The flex-shrink Property

Example

문서 도구