Flexbox를 한 단계 업그레이드

반응형

유동적인

유연한 방향과 유연한 래핑의 혼합

.container {
      display: flex;
      flex-flow: row wrap;
}

내용을 정당화하다

• 내용을 정당화하다
  기본값: flex-start
• 얼라인먼트하다
  기본값: 스트레치
  a) 상위 요소의 높이가 있고, b) 일부 항목이 더 큰 경우 정렬-수정 작업
  .mbs {
  정렬-비틀기: 기준선
  /* 텍스트의 첫 줄을 맞추다 */
  }

 

얼라인먼트하다

여러 행에서 작동합니다. 개별 행 안의 항목에 대해 사용할 수 있는 정렬 항목.

기본값: 스트레치

유연하게 성장하다

• 유연하게 성장하다
  기본값: flex-grow: 0
  플렉스 아이템은 주어진 플렉스 성장 단위에 비례하여 성장한다. flex-grow의 경우 0은 콘텐츠의 최소 크기에 맞기 때문에 커지지 않습니다.
• 신축성 있는
  기본값: flex-defines: 1
  플렉스 항목은 지정된 플렉스 축소 단위를 기준으로 축소됩니다. 플렉스-수축의 경우: 0, 줄어들지 않습니다.

 

신축성 있는

기본값: flex-discute: auto

• 지정된 너비를 찾습니다.
• 명시적 너비가 없는 경우 지정된 콘텐츠 크기에 맞춥니다.
• 플렉서블 대 너비
  플렉시블은 주축을 위해 작동한다. 즉, 플렉스 방향이 기둥이면 플렉스 베이스가 높이가 됩니다.
• 플렉시블: 0
  이상적인 너비는 0입니다. 그래서 최대한 줄어들어요.
• 이미지 요소에 flex-basis를 사용하면 버그가 발생함
  .img {
  플렉스-파이프: 600px;
  최소 너비: 0;
  최소 높이: 0;
  }

굽실굽실하게 하다

 

플렉스-성장, 플렉스-수축, 플렉스-베이스의 혼합

기본값: 플렉스: 0 1 자동

• 플렉스: 1
  플렉시블 확장: 1, 플렉시블 확장: 0
• 플렉스: 자동
  플렉시블 확장: 1, 플렉시블 확장: 1, 플렉시블 확장: 자동

자기 자신을 맞추다

하위 기본 축에 대해 항목을 개별적으로 정렬할 수 있음

 

여백: 플렉스박스의 자동

flexbox에서 여백: auto는 네 가지 방향 모두에 대해 작동합니다. 또한 여백 상단: auto를 사용하여 요소를 아래로 밀 수 있습니다.

.container {
      display: flex;
      flex-direction column;
}

.item {
      margin-top: auto;
}

페이지 중앙에 배치

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
}