FlexBox - Tips

Shorthand

• flex-direction, flex-wrap == flex-flow
• flex-grow, flex-shrink, flex-basis == flex

<style>
  .container{
    background: pink;
    height: 50vh;
    width: 50vw;
    padding: 0.5em;
    margin: 25vh auto 0;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    
    /* shorthand
    * flex-flow: row nowrap;
    */
  }

  .item{
    background: lightblue;
    margin: 0.5rem;
    /*
    * flex-flow: row nowrap; 일 때 item에 width를 %로 추가하면 의도한 것과 다르게 동작한다. 
      지정값이 아니라 컨테이너 크기의 증감에 따라 신축함
      width: 25%
    */

    /*
    * flex-flow: column nowrap; 에서도 같은 현상 확인
      height: 25%
    */    
    
    /*
    * flex item에서 유용한 프로퍼티
    flex-grow
    flex-shrink
    flex-basis
    flex
    order
    align-self
    */
  }
</style>

flex item에 width주기 vs flex-basis

flex-basis에 부여하는 값은 '이상적인 너비'로 max-width와 비슷하다. 주어진 값보다 스크린이 좁다면 줄어들 수 있으며 주어진 값보다 넓으면 늘어나지 않는다.

그러나 max-width, min-width등으로 override하는 경우가 더 나은 상황이 있다. flex-basis는 기준축을 중심으로 하는 값이므로 row일 때는 width로 동작하지만 flex-direction: column; 일 때는 height로 동작한다. 이 때 width값은 컨테이너를 가득 채우기 때문에 상기한 두 값을 추가해주는 편이 레이아웃을 안정시킬 수 있다.