flex를 사용하기 위해서는 일단 플렉스를 사용할 부분을 컨테이너로 묶어줘야 된다. 배치하려는 요소들은 아이템이라고 한다.
display: flex;
값을 준다.flex-direction: row
: 기본값flex-direction: column;
flex-direction: row-reverse
: row방향을 거꾸로flex-direction: column-reverse
: column방향을 거꾸로flex-wrap: nowrap
: 기본값flex-wrap: wrap
: flex-item을 여러 줄로 묶음flex-wrap: wrap-reverse
: wrap에서 역방향으로 묶음flexbox froggy 게임을 해보던 중 24 단계에서 문제를 못 풀었다.
flex-wrap: wrap-reverse를 적용해야 됐던 문제였다. 흑흑...
왜 wrap-reverse에 대해서 몰랐을까.
justify-content: flex-start
: 기본값justify-content: flex-end
: item을 주 축을 기준으로 끝점으로 정렬justify-content: center
: item을 주 축을 기준으로 가운데 정렬justify-content: space-between
: 시작 item과 마지막 item은 양 끝에 정렬되고, 나머지는 사이에 고르게 정렬justify-content: space-around
: 균등한 여백을 포함해서 정렬align-items: stretch
: 기본값, 교차축을 채우기 위해 item을 늘림align-items: flex-start
: 각 줄의 시작점 정렬align-items: flex-end
: 각 줄의 끝점 정렬align-items: center
: 가운데 정렬align-items: baseline
: 문자 기준선 정렬flex: flex-grow flex-shrink flex-basis;
flex: 1 1 50px;
flex: 1 => 1 1 0 (basis는 auto가 아닌 0이 들어간다)
flex: none => 0 0 auto;
flex: 1 50px; => 1 1 50px로 shrink는 default 값이 들어간다.
flex: 1 2 => 1 2 0; => flex-basis는 값을 생략할 경우에는 0이 적용된다.
align-self: auto
: 기본값align-self: stretch
align-self: flex-start
align-self: flex-end
align-self: center
align-self: baseline
flex의 주축은 항상 row라고 생각했었는데, flex-direction을 통해서 주 축은 변할 수 있는 것이라는 걸 알게 되었다.
float를 이용해서 배치를 해주다가 flex를 이용하니까 간편하기도 하면서, 한편으로는 flex를 염두에 두고 구조를 짜는 게 아직 익숙치 않고, 어렵다.
그리고 flex 축약 속성은 진짜... 너무 어렵다...