개구리 뒷다리~

강정우·2023년 11월 29일
0

HTML, CSS

목록 보기
25/27

개구리 게임

flex-direction

  • 컨테이너 안의 요소들의 정렬 방향을 지정한다.

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

order

  • 양수 음수 0이 존재하고
    default값은 0이다. 제위치
    양수는 제일 뒤로
    음수를 제일 앞으로 보낸다.

align-self

  • 개별 요소에 적용할 수 있다.
#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}
  • 이런식으로 클래스 별 지정할 수 있다.

flex-wrap

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

  • 보통 display: flex하면 개짜부되는데 이를 위 값을 이용해서 펼쳐줄 수 있다.

flex-flow

  • flex-direction과 flex-wrap이 자주 같이 사용되기 때문에
    공백을 두고 순서대로 flex-direction과 flex-wrap의 enum 타입중 2개의 값을 입력받는다.

align-content

  • align-item은 컨테이너를 욺직인다면
    align-content는 컨테이너 내부의 값을 이동하는 것이다.

ps. 개구리게임 24번 정답

#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  justify-content: center;
  align-content: space-between;
}
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글