플렉스 아이템

flex 아이템(자식) 요소 속성

그리드와 달리 justify-items, justify-self는 플렉스에 없다.

flex-Grow

• 기본값 : 0

• 아이템 박스의 크기를 늘린다.

• 컨테이너 박스를 각 item이 설정한 grow 값만큼 공평하게 나눠갖는다.

• 만약 여러 item중 한 개의 크기를 더 크게 만들고 싶다면 해당 item에 grow속성을 추가로 적용한다.

  <style>
        <!-- 1 -->
    .flex-item {
    flex-grow: 1; <!-- 아이템을 5개로 지정했을 때 각 아이템이 5/1만큼씩 컨테이너 공간을 나눠가진다 -->
    }
    .flex-item:nth-child(2) {
    flex-grow: 2; <!-- 6/2만큼의 공간을 가져간다. -->
    }
  
        <!-- 2 -->
        <!-- 값이 0일 때 -->
    .flex-item {
    flex-grow: 0;
    }
    .flex-item:nth-child(2) {
    flex-grow: 2; <!-- 컨테이너박스의 남은 여백 공간을 모두 가져간다. 또한 해당 자식요소의 grow속성에 어떠한 값을 적용해도 똑같이 렌더링된다. -->
    }
  </style>

flex-shrink

• 기본값 : 1 (부모 컨테이너의 크기에 맞추게됨)

• 아이템 박스의 크기를 줄인다.

• 특정한 item의 크기를 설정한 basis값 만큼 고정한다. (반드시 basis의 값이 있어야 적용가능)

<style>
  <!-- 1 -->
  .flex-item:nth-child(1) {
  flex-basis: 150px;
  flex-shrink: 0;  <!-- 값이 0일 때, 설정한 크기 고정. -->
  }

  <!-- 2 -->
  .flex-item:nth-child(1) {
  flex-basis: 150px;
  flex-shrink: 1;  <!-- 3/1만큼 줄어듬 -->
  }
  .flex-item:nth-child(2) {
  flex-basis: 150px;
  flex-shrink: 2;  <!-- 3/2만큼 줄어듬 -->
  }
</style>

flex-Basis

• item의 크기를 정한다.

      <style>
      .flex-item:nth-child(2) {
      flex-basis: 200px;
      }
      </style>

flex(속기형)

.flex-item {
  flex: grow shrink basis; /* 기본값 : 0 1 auto*/
}

order

• 아이템 순서 설정

• 원래는 마크업 순서대로 렌더링되지만 order속성을 사용해서 특정 아이템 박스의 위치를 임의로 설정가능하다.

• order값이 같은 경우 마크업된 순서로 우선권을 가진다.

.flex-item {
  width: 50px;
  height: 50px;
  margin-bottom: 1px;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}

.flex-item:nth-child(1) {
  order: -1;
  background: #d9727b;
}
.flex-item:nth-child(2) {
  order: 0;
  background: #735454;
}
.flex-item:nth-child(3) {
  order: -2;
  background: #342c40;
}
.flex-item:nth-child(4) {
  order: 0;
  background: #f2ad94;
}

align-self

• 자식 자신에게 속성을 적용할 때 사용

• auto/ flex-start/ flex-end/ center/ baseline/ stretch

.flex-item:nth-child(1) {
  align-self: flex-start;
  background: #d9727b;
}

/* 또는 */
.flex-item:nth-child(1) {
  flex: 2 0 20px;
  height: 100px;
  align-self: flex-start;
  background: #d9727b;
}