티스토리 뷰

Frontend/CSS, HTML

[생활코딩][CSS] flex(flex-basis, shrink, grow)

blueprint-12 2021. 12. 8. 21:45

flex - 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구, 레이아웃을 효과적으로 표현 가능

 

부여되는 속성을 나타낸 차트▼

Container  item
display  order
flex-direction /*기본값: row 행의 방향 <->column 수직*/ flex-grow /*기본값 0*/
flex-wrap flex-shrink
flex-flow flex-basis 
justify-content flex
align-items align-self
align-content  

container에 height를 지정해주어야 flex의 효과를 제대로 알 수 있습니다. 

 

item관련 flex속성

 

flex-basis  flex의 방향에 해당되는 엘리먼트의 기본크기를 설정하는 속성, row 면 가로폭 , column이면 세로폭 즉 높이가 변경되는 것입니다. e.g.) .item:nth-child(2) {flex-basis: 200px;} 

*flex-basis를 가진 flex item은 화면이 줄어들 때, 다른 item이 이 속성을 가지고 있지 않다면 본인의 공간이 줄어들게 됩니다. 그렇다면 본인의 공간을 존속시키는 속성은 무엇이 있을까요? flex-shrink입니다.

flex-shrink 

※전제: item이 flex-basis값을 가지고 있어야 합니다.

줄이다, 줄어들다 /값을 0으로 주면 화면이 줄어들어도 flex-basis에서 설정한 값이 유지되어 item의 부피가 줄어들지 않게 됩니다.

하지만, 1을 주면 다시 줄어들게 되고 나머지 item에도 flex-shrink를 주게되면 n분의 1을하여 그 범위만큼 각각 분담하여 화면이 작아질 때, 줄어들게 됩니다.

	.item:nth-child(1) {
        flex-basis: 150px;
        flex-shrink: 2; /*화면이 줄어들 때, 3분의 2만큼을 분담하여 줄어든다 더 많이 줄게되는 것*/
      }
      .item:nth-child(2) {
        flex-basis: 150px;
        flex-shrink: 1; /*화면이 줄어들 때, 3분의 1만큼을 분담하여 줄어든다.*/
      }

 

flex-grow  기본값은 0입니다. container의 여백의 공간을 나머지 엘리먼트(item)들과 n분의 1하여 여백을 채우게 되는 기능을 제공합니다. (<->flex-shrink)

<style>
      .container {
        background-color: powderblue;
        height: 200px;
        display: flex;
        flex-direction: row;
      }
      .item {
        background-color: blue;
        color: white;
        border: 1px solid white;
        flex-grow: 0;
      }
      
      .item:nth-child(2) {
        flex-grow: 100;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>

flex-grow 예제 결과물

  • 코드를 보면 2번째 item의 flex-grow값이 100으로 돼있는데 여기서 속성값을 2로 주든 50을 주든 같은 결과물을 가집니다.
  • 나머지 item들은 0이라는 기본값을 가지고 있으므로 flex-grow의 유효값을 가지는 2번째 item만 container의 여백을 채우게 되는 것이죠.

 

'Frontend > CSS, HTML' 카테고리의 다른 글

[생활코딩][CSS] media query, 반응형 웹,flex와 같이 사용하기  (0) 2021.12.10
[생활코딩][CSS] flex2(holy grail layout 레이아웃 짜기, Properties for flex-cont, items)  (0) 2021.12.09
[CSS]#17 will-change, :focus- within(CSS pseudo-class)  (0) 2021.10.31
[CSS]#16 animation(animation-delay, animaiton-timing-function)  (0) 2021.10.29
[CSS]#15 vw, vh, %(percent)/animation: forwards  (0) 2021.10.28
댓글