CSS:flexbox

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

Container / Item (Box)

• 코딩독학) CSS Flexbox, justify-content, align-items

Flex의 속성값에는 box들을 감싸고 있는 container에 적용되는 속성들이 있고, 개별 box에 적용되는 속성이 있다.

Container에 적용되는 속성

• #display
• #flex-direction
• #flex-wrap
• #flex-flow
• #justify-content - "메인축 (진행 축)"
• #align-items - "수직축 (교차 축)"
• #align-content - "여러 줄, 교차 축"

Box에 적용되는 속성

• #order
• #flex-grow
• #flex-shrink
• #flex
• #align-self

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

flex item의 "수직축 (교차 축)" 정렬을 제어한다.

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

align-content

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

여러 줄이 발생하는 경우 즉, flex-wrap: wrap에만 적용되며,

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

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

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