[ css ] Flex Items속성: flex-basis

Suji Kang·2024년 1월 12일
CSS
post-thumbnail

🐾 flex-basis

: Flex Items의 초기 크기 지정

flex-basis 속성은 Flex Container 내의 Flex Items의 초기 크기를 지정하는 CSS 속성입니다. 이를 통해 각 아이템이 초기에 차지하는 공간의 크기를 설정할 수 있습니다.

flex-basis는 아이템의 크기를 설정하는 데 사용되며, 이 값이 설정되면 flex-grow 및 flex-shrink 속성에 의해 유연하게 크기가 조절될 수 있습니다.

 <style>
      .container {
        border: 4px solid lightcoral;
        display: flex;
      }
      .container .item {
        height: 100px;
        border: 4px dashed rgb(11, 131, 251);
        background-color: lightgreen;
        border-radius: 10px;
        flex-grow: 1;
      }
  </style>
  <body>
    <div class="container">
      <div class="item item1">Good job!</div>
      <div class="item item2">A</div>
      <div class="item item3">Hello World~~</div>
    </div>
  </body>

 <style>
      .container {
        border: 4px solid lightcoral;
        display: flex;
      }
      .container .item {
        height: 100px;
        border: 4px dashed rgb(11, 131, 251);
        background-color: lightgreen;
        border-radius: 10px;
        flex-grow: 1;
        flex-basis: 0;
      }
  </style>
  <body>
    <div class="container">
      <div class="item item1">Good job!</div>
      <div class="item item2">A</div>
      <div class="item item3">Hello World~~</div>
    </div>
  </body>

1:1:2 인것을 확인할수있다 

 	  .container {
        border: 4px solid lightcoral;
        display: flex;
      }
      .container .item {
        height: 100px;
        border: 4px dashed rgb(11, 131, 251);
        background-color: lightgreen;
        border-radius: 10px;
        flex-grow: 1;
        flex-basis: 0;
      }
      .container .item3 {
        flex-grow: 2;
      }

각 아이템에 100px을 주었는데, 뭔가 1:1:2의 비율이 되지않았다.
왜냐하면? 기본적으로 flex-basis가 가지고있을 100px을 여백을 제외한 나머지 여백을 가지고 1:1:2 비율로 맞췄기 때문에.

	  .container {
        border: 4px solid lightcoral;
        display: flex;
      }
      .container .item {
        height: 100px;
        border: 4px dashed rgb(11, 131, 251);
        background-color: lightgreen;
        border-radius: 10px;
        flex-grow: 1;
        flex-basis: 100px;
      }
      .container .item3 {
        flex-grow: 2;
      }
profile
Suji Kang
나를위한 노트필기 📒🔎📝
이전 포스트

[ css ] Flex Items속성: flex-grow

다음 포스트

[ css ] Flex Items속성: flex-basis

0개의 댓글