공부할 수 있는 사이트

• flexboxfroggy
• flexboxdefense
• flexbox playground
  • Properties for the flex container -> flex로 지정해준 태그에 적용하는 속성들.
  • Properties for the flex items -> flex-item들한테 지정해주는 속성들.

메모

• flex의 자식으로 있는 태그들이 flex-item이 된다.
• flex-item들은 display가 무엇이든 간에 따로 설정하지 않으면, 자기 자신의 크기를 줄일지언정 줄바꿈을 하지 않는다. -> flex를 준 태그가 그런 것이 아니라 flex-item들이 이렇게 행동한다는 게 중요!
• flex-item들은 부모의 높이를 알고 있다.
  • 높이를 지정하지 않으면 부모 높이만큼 늘어남.
  • flex 태그의 align-items: stretch; 가 기본값이기 때문에
• flex-item들을 한 번에 움직일 때는 부모 flex에게 속성을 주고, 각각 움직일 때는 flex-item에게 속성을 준다.
  • ex) align-self: flex-start;