CSS:flexbox

flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다.

flex

• MDN - flex

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다.

#flex-grow, #flex-shrink, #flex-basis의 단축 속성입니다.

flex-direction

column 또는 row 값에 따라 #align-content, #justify-content, #align-items, #align-self 가 모두 다르게 작동한다.

Chrome 디버깅 툴에서 Elements 탭, Styles 항목을 선택한 후, display: flex;인 곳에 아래의 상세 속성을 확인하는 버튼이 추가된다.

row

column

justify-content

flex item의 "진행 축" 정렬과 간격을 제어한다.

flex-start (기본값)

Flex 품목은 라인의 시작 부분에 포장됩니다.

flex-end

Flex 품목은 라인 끝쪽으로 포장됩니다.

center

Flex 품목은 라인의 중앙을 향해 포장됩니다.

space-between

Flex 항목은 균일 한 간격으로 배치되며 첫 번째 항목은 컨테이너의 한쪽 가장자리에 정렬되고 마지막 항목은 반대쪽 가장자리에 정렬됩니다.

첫 번째 항목과 마지막 항목에 사용되는 가장자리는 #flex-direction 및 CSS:direction (direction: ltr또는 direction: rtl)에 따라 다릅니다.

space-around

양쪽 끝에 절반 크기의 공백을 제외하고 space-between 와 동일.

space-evenly

구현 중 인가?

Auto Margin

auto 여백 (margin: auto) 을 사용하면 플렉스 항목을 중앙에 배치하거나 간격을 두거나 하위 그룹으로 묶을 수 있습니다.

플렉스 컨테이너에 적용되는 #justify-content 와 달리 auto 여백은 플렉스 항목에 적용됩니다.

지정된 방향으로 모든 여유 공간을 소비하여 작동합니다.

여백이 필요한 위치의 flex-item만 #flex-grow를 1로 하여, 공간을 확보하는 방법도 있다.

align-items

align-items 예제 flex item의 "교차 축" 정렬을 제어한다.

• flex-start
• flex-end
• center
• baseline
• stretch (기본값)

align-content

flex item의 "여러 줄 교차 축" 정렬과 줄 사이 간격을 제어한다.

여러 줄이 발생하는 경우 즉, flex-wrap: wrap에만 적용되며, 여러 줄이 발생하는 경우 #align-items의 교차 축 정렬보다 적용 우선순위가 높다.

• flex-start
• flex-end
• center
• space-between
• space-around
• stretch

align-self

flex-grow

• MDN CSS:flex-grow

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다.

보통 flex-grow를 사용할땐, #flex-shrink, #flex-basis 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 #flex 속성을 이용해 축약형으로 사용합니다.

다음은 vuetify의 v-spacer에 적용된 class 내용이다.

.spacer {
    flex-grow: 1 !important;
}

flex-shrink

flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.

flex-grow vs flex-shrink

• CSS 플렉스박스(flex) flex-grow와 flex-shrink 속성의 완벽 이해

flex-basis

flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. box-sizing을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

inline-flex

• (HTML, CSS) 스크롤바 생성 overflow (auto, scroll, hidden)
• CSS display: flex 그리고 inline-flex

반응형에서 컨테이너의 자식 요소에도 영향을 준다

gap

item과 item 사이의 간격 조정.

div {
  display: flex:
  gap: 10px 5px;
}

justify-items 및 justify-self 속성이 없는 이유

• [추천] CSS Flexbox에서 "justify-items"및 "justify-self" 속성이 없는 이유

글쓴이 왈:

필요하지 않기 때문입니다.

Examples

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

See also

• CSS
• CSS:display
• CSS:grid

Favorite site

• MDN - Flexbox
• MDN - flexbox의 기본 개념
• [추천] flexbox로 만들 수 있는 10가지 레이아웃 ⁶
• [추천] NAVER D2 - flexbox로 만들 수 있는 10가지 레이아웃
• 코딩의 시작, TCP School - 플렉서블 박스 레이아웃
• (CSS3) flex Box - justify-content, align-items
• Flexbox : align-items와 align-content 차이
• (HTML/CSS) display(inline-block, flex)를 이용하여 grid만들기
• [추천] CSS Flex(Flexible Box) 완벽 가이드
• [추천] align-items / align-content / align-self의 특징과 차이점
• [추천] An Interactive Guide to Flexbox in CSS - Flexbox 인터랙티브 가이드
  • 강력한 레이아웃 모드인 Flexbox를 쉽게 배워보기
  • 미디어/컨테이너 쿼리를 사용하지 않고, fluid 원리에 따라 매끄럽게 흐르는 레이아웃 만들기

Online game

• Flexbox Froggy - flex-box를 사용하여 개구리를 이동시키는 게임

References