display: flex 와 justify-content

display: flex 와 justify-content

display: flex

⇒원래 박스들은 한 줄에 하나만 나타낼 수 있게 되었다. 인라인블록은 1줄에 여러개 가능!

한 줄에 하나만 있을 수 있던 박스들도 display: flex를 이용하면 1줄에 여러 박스 배치가 가능해진다.

justify-content

⇒ 콘텐츠 항목 사이와 주위에 공간을 분배하는 방법을 정의합니다.

• justify-content의 여러가지 속성들

  justify-content: center;     /* Pack items around the center */
  justify-content: start;      /* Pack items from the start */
  justify-content: end;        /* Pack items from the end */
  justify-content: flex-start; /* Pack flex items from the start */
  justify-content: flex-end;   /* Pack flex items from the end */
  justify-content: left;       /* Pack items from the left */
  justify-content: right;      /* Pack items from the right */
  justify-content: space-between; /* Distribute items evenly
                                     The first item is flush with the start,
                                     the last is flush with the end */
  justify-content: space-around;  /* Distribute items evenly
                                     Items have a half-size space
                                     on either end */
  justify-content: space-evenly;  /* Distribute items evenly
                                     Items have equal space around them */​

justify-content - CSS: Cascading Style Sheets | MDN

→justify-content에 관한 MDN