[리액트] TailwindCss 적응기

기본적으로 사용할 명령어

justify-content
align-items
flex-direction
order
align-self
flex-wrap
flex-flow
align-content

https://flexboxfroggy.com/#ko

#pond {
  display: flex;
justify-content: OOO;
}

justify-content

flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.

#pond {
  display: flex;
align-items: flex-end;
}

align-items

flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.

함께사용

#pond {
display: flex;
justify-content: center;
align-items: center;
}

flex-direction

row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.

#pond {
  display: flex;
flex-direction : column-reverse;
}

함께 사용

#pond {
  display: flex;
justify-content: flex-end;
flex-direction: row-reverse;
}

#pond {
  display: flex;
flex-direction : row-reverse;
align-items: flex-end;
justify-content: center;
}

order

#pond {
  display: flex;
}

.yellow {
//기본 order 값은 0
order: 1;
}

align-self

align-items를 개별적으로 적용하는 속성

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self: flex-end;
}

flex-wrap

nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

#pond {
  display: flex;
flex-wrap: wrap
}

#pond {
  display: flex;
flex-direction : column;
flex-wrap: wrap;
}

flex-flow

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신할 수 있습니다. 이 속성은 공백문자를 이용하여 두 속성의 값들을 인자로 받습니다.
예를 들어, 요소들을 가로선 상의 여러줄에 걸쳐 정렬하기 위해 flex-flow: row wrap을 사용할 수 있습니다.

#pond {
  display: flex;
flex-flow: column wrap;
}

align-content

여러 줄 사이의 간격을 지정할 때 쓰입니다

flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.

#pond {
  display: flex;
  flex-wrap: wrap;
align-content: flex-start;
}

#pond {
  display: flex;

flex-flow : wrap-reverse column-reverse;
justify-content: center;
align-content: space-between;
}