FlexBox

✏️  display

주어진 값에 따라 모든 직계 자식(inline or block 등)에 대해 flex context를 적용시킴

.example{
display: flex; /* or inline-flex; */
}

 

✏️  order

Flex 요소의 순서를 지정해준다. 기본적으로 flox 항목은 소스 순서대로 배치된다. 하지만 order 속성은 flex container에 나타나는 순서를 제어한다.

 

✏️  justify-content

Flex 요소들을 주축(가로선)을 따라 정렬시킨다.

 

• flex-start(기본값) : item을 flex 방향의 시작 부분을 향해 배치된다.
• flex-end : item이 flex 방향의 끝 부분을 향해 배치된다.
• start : item이 시작 방향을 향해 writing-mode가 된다.
• end : item이 끝 방향을 향해 writing-mode가 된다.
• left : item이 container 왼쪽에 위치한다.
• right : item이 container 오른쪽에 위치한다.
• center : item이 선을 따라 중앙에 배치된다.
• space-between : item이 라인에 고르게 위치한다. 첫번 째 item은 시작 줄에 있고 마지막 item은 끝 줄에 위치한다.
• space-around : item이 동일한 공간으로 줄에 고르게 위치한다. 모든 item의 양쪽에 동일한 공간이 있다. 첫 번째 item은 container의 가장자리에 1unit의 공간이 있지만 다음 item에는 적용되는 자체 간격이 있어 다음 item 사이에는 2 unit의 공간이 있다.
• space-evenly : item이 두 item 사이의 간격이 동일하도록 위치한다.

 

❗️ flex-start와 start의 차이

flex-start는 -reverse 플렉스 방향 값의 존재를 고려하지만 start는 그렇지 않다.

❗️ start와 left의 차이

• start : 페이지 또는 DOM의 방향(RTL, LTR)에 따라 변한다. 페이지가 ltr이면 시작은 왼쪽, 끝은 오른쪽이다. 방향이 rtl이면 시작은 오른쪽, 끝은 왼쪽이다.
• left : 왼쪽 방향을 나타낸다.(항상 왼쪽에서 오른쪽으로 항목을 정렬)

 

✏️  flex-direction

주축을 설정하여 flex 항목이 flex container에 배치되는 방향을 정한다. Flexbox는 단방향의 레이아웃 개념을 가지고 있다. (flex index는 주로 가로 행이나 세로 열에 배치된다.) - 정렬할 방향을 지정

 

• row(기본값) : 왼쪽에서 오른쪽 방향 ltr(DOM 방향), 오른쪽에서 왼쪽 방향 rtl
• row-reverse : 오른쪽에서 왼쪽 방향 ltr, 왼쪽에서 오른쪽 방향 rtl
• column : 위에서 아래 방향
• column-reverse : 아래에서 위 방향

✏️  flex-wrap

Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다. 기본적으로 flex 항목은 모두 한 줄에 맞추려고 하는 성격을 가지고 있다. flex-wrap은 이를 변경하고 필요에 따라 항목을 래핑하도록 한다.

 

• nowrap(기본값) : 모든 flex item이 한 줄에 표시된다.
• wrap: flex item이 위에서 아래로 여러 줄로 나눠서 표시된다.
• wrap-reverse: flex item이 아래에서 위로 여러 줄로 나눠서 표시된다.

 

✏️  flex-grow

단위가 없이 비율로 사용되는 값을 정한다. 항목이 차지하는 flex container 내부의 사용 가능한 공간의 양을 타나낸다.

.example{
flex-grow: 3; /* default 0*/
}

 

✏️  gap

Flex item 사이의 공간을 명시적으로 제어한다. 외부 가장자리가 아니라 item 사이에만 해당 간격을 적용한다.

.example{
gap : 10px 30px; /* column-gap row-gap */
gpa : 10px /* row-gap */
}

 

✏️  flex-flow

flex-direction and flex-wrap의 속성을 간략히 한 속성이다.

.example{
flex-flow: row nowrap; /* flex-direction flex-wrap */
}

✏️  align-self

해당 flex item에 대해 개별적으로 적용한다. 지정된 align-items 값을 무시하고 Flex요소를 세로선 상에서 정렬한다.

 

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

 

✏️  align-items

flex item이 현재 라인의 교차 축(세로)을 따라 배치된다.(justify-content의 교차 축(주축에 수직)이라고 생각!)

 

• stretch(기본값) : container를 채우기 위해 늘림.
• flex-start / start / self-start
• flex-end / end / self-end
• center : item이 교차 축의 중앙에 위치한다.
• baseline : 기준선이 정렬되는 것처럼 item이 정렬된다.

 

✏️  align-content

세로선 상에 여분의 공간이 있는 경우 Flex container 사이의 간격을 조절한다.

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

 

✏️  flex-basis

item의 항목의 기본 크기를 결정한다. width 값을 설명하지 않으면 컨텐츠의 크기가 된다. 원래의 크기가 지정된 크기보다 클 경우 그에 맞게 큰 상태를 유지한다. (width를 설정하면 지정한 크기보다 커져도 크기는 변하지 않는다.)

.example {
    flex-basis: auto; /* 기본값 */
    /* flex-basis: 0; */
    /* flex-basis: 50%; */
    /* flex-basis: 300px; */
    /* flex-basis: 10rem; */
    /* flex-basis: content; */
}

See the Pen Untitled by 신동재 (@tllspaez-the-looper) on CodePen.