20230326 [Flexbox]

Flexbox

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

container (부모 역할)

1. flex-direction

flex-direction은 안에 있는 Item들을 정렬할 때 가로로 정렬할지, 세로로 정렬할지를 선택할 수 있다. 정방향 가로정렬이 기본값이다.

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

2. flex-wrap

flex 는 기본적으로 item을 한줄에 정렬하려고 한다. 이때 중간에 끊고 줄바꿈을 하고 싶다면 flex-wrap을 사용할 수 있다. no-wrap이 기본값이다.

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

3. justify-content

메인 축을 중심으로 아이템들을 여백과 함께 정렬하는 방식을 지정할 수있다.
flex-start가 기본 값이며 중앙 정렬을 원할 경우 center나 space-around등을 많이 사용한다.

.container {  
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; 
}

4. align-items

container 안에서 items 세로 정렬을 하는데 쓰인다.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

5. align-content

flex-wrap 을 사용해서 item이 여러 줄로 존재하고 있을 때, 여백과 함께 정렬하는 방식을 지정할 수 있다. 기본값은 flex-start이며, 한 줄 밖에 없을 때는 justify-content와 똑같다.

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

item (자식 역할)

1. order

각각의 아이템은 기본적으로 html 에 나열된 순서대로 우선순위가 매겨진다. 하지만 order를 임의로 지정하면 지정한 order 순서대로 정렬할 수 있다.

.item {
  order: 5; /* default is 0 */
}

2. flex-grow

flex grow는 각 아이템들이 공간을 차지하는 비율을 지정한다. 기본 값은 모두 1이며 모두 1일 경우에는 공간이 균등하게 분배되지만 한 아이템이 2이면 해당 아이템에만 2배의 공간을 할당하고 나머지 공간을 남은 아이템들이 균등하게 가져간다.
기본값으로 flex : 1이렇게 만 적어도 된다.

.item {
  flex-grow: 4; /* default 0 */
}

3. align-self

이렇게 하면 개별 플렉스 항목에 대해 기본 정렬(또는 정렬 항목으로 지정된 정렬)을 재정의할 수 있다.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}