flex를 사용하면서 justify-content와 align-items, flex-direction 정도만 자주 사용해서 나머지 속성들에 대해서 이해가 부족했다. 그래서 나머지 속성들도 알아보았다.
flex 속성을 연습해보는 사이트
http://flexboxfroggy.com/#ko
column-reverse, row-reverse 속성
이 두가지 reverse 속성은 item들의 순서를 변경해준다.
결론은 최신순으로 보여주고싶을때 사용하면 될듯.
- row-reverse
1,2,3 번순으로 나열되어있던 item들이 3,2,1 순으로 정렬되면서 오른쪽으로 붙게된다. 그리고 justify-content의 flex-start도 오른쪽으로 바뀌게된다.
맨뒤에 item을 앞으로 보내고 싶을때 사용하면 될거같다. - column-reverse
1,2,3번 순으로 나열되어있던 item이 3,2,1 순으로 column방향으로 정렬된다.
justify-content의 flex-start도 아래쪽으로 바뀌게된다.
MDN(flex-direction)
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
align-self, justify-self
self속성은 align-items나 justify-content가 걸린 item들을 개별로 정렬을가능하게 설정해주는 속성이다.
MDN(align-self)
https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
MDN (justify-self)
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self
order 속성
flex가 적용된 item들에게 order속성을 적용시킬 수 있다.
0이 default값이고 적용하는 숫자만큼 이동한다.(양수음수)
아직 어디다가 써야되는지는 잘모르겠다.
MDN(order)
https://developer.mozilla.org/en-US/docs/Web/CSS/order
align-content
align-items와 비슷해서 헷갈린다. 박스들사이에 간격을 조절하는건데 써야될 때 다시보자.
MDN(align-content)
https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
flex-wrap
flex-wrap은 최신순으로 보여줄 때 사용하면될듯하다.
MDN(flex-wrap)
https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap
