CSS-2) CSS 기초 정리 2

 flex-box는 width나 height의 크기를 신경 쓰지 않는다. 오직 item을 한 줄에 위치시키는 것만 고려한다. 브라우저의 크기가 줄어든다면, width 값을 줄여서 flex-box를 유지한다.

[flex-wrap]

flex-wrap : nowrap;

-> 사용하지 않을 때에도 적용되는 default로 flex-box가 한 줄에 위치하게 만든다.

flex-wrap : wrap;

-> itmes의 width, heigth 설정 값을 유지하라는 명령어다. 크기를 유지하기 위해서 라면 줄에서 흩어져도 상관없다.

flex-wrap : wrap-reverse;

->wrap 상태로 만들되, 순서를 뒤집어서 정렬한다.

[flex-direction]

flex-direction : row-reverse;

-> item들을 가로로 정렬하되, 그 순서를 뒤집어서 정렬한다.

flex-direction : column-reverse;

-> item들을 세로로 정렬하되, 그 순서를 뒤집어서 정렬한다.

[align-content]

align-content : flex-strat;

-> 적용하지 않았을 때의 default로 item들을 parent요소의 가장 상단으로 붙인다.

align-content : flex-end;

-> item들을 브라우저가 표시되는 영역에 한 해서 parent요소의 가장 밑으로 붙인다.

[flex-shrink]

flex-shrink : 2;

-> nth-child()를 통해 하나의 child 요소만 지정하고 사용할 경우, flex-box의 크기가 줄어들 때 해당 child요소만 다른 요소들에 비해서 크기가 2배 더 줄어든다. *flex-shrink : 3;의 경우는 3배로 줄어든다. 즉, nth-child()를 이용해 각 child 요소들에 flex-shrink를 적용한다면, 브라우저의 크기에 따라 원하는 크기로 조정하는 게 가능하다.

[flex-grow]

flex-grow : 1;

-> nth-child()를 통해 child 요소들을 지정해서 사용할 경우, 요소들 사이의 빈 공간이 없도록 채우는 역할을 수행한다. 만약 여러 요소들에 flex-grow를 적용할 경우, 따라오는 숫자 값이 큰 순으로 더 많은 빈 공간을 자신의 영역으로 차지한다. default는 flex-grow: 0이다.

[flex-basis]

flex-basis : 50%;

-> flex-basis는 flex-direction에 따라서 그 기준이 바뀐다. 만약 flex-direction:row인 flex-basis의 경우는 브라우저의 크기가 변하지 않는 기준으로는 width와 같은 역할을 한다. flex-basis 는 요소들의 초기 크기를 설정하는 역할이기 때문이다. 즉, flex-basis는 flex-direction에 따라서 width와 height의 초기 값을 설정할 수 있게 된다.

[flex-flow]

flex-flow : column wrap;

-> flex-flow의 경우는 flex-direction과 flex-wrap의 인자를 동시에 받는 속성이다. 이 두 속성이 자주 사용되기 때문에 flex-flow를 사용하면 보다 편하게 값을 줄 수 있다.

[align-content]

align-content : flex-start;

-> align-content는 flex-container가 wrap으로 설정된 경우에만 관련되며, 여러 줄들 사이의 간격을 지정하는 역할을 한다. 즉, 두 개 이상의 flex 라인이 없으면 align-content는 필요하지 않다. align-content가 값으로 받는 인자들은 flex-start, flex-end, center, space-around, space-between, stretch와 같은 값들을 인자로 받는다. * align-items는 해당 줄들의 내부 간격을 정렬하는 속성이다.

 아직 여러 요소들이 더 남아있겠지만, flexbox를 이용한 css 기초는 여기까지 인 것 같다. 이렇게 정리하는 것 만으로는 숙지하기가 어려울 것 같아서 반복적인 연습을 할 예정이다. 이를 도와주는 프로그램이 있다.

https://flexboxfroggy.com/#ko

 위의 링크를 타고 들어가면 귀여운 froggy가 연습을 도와줄 거다:)

"기록은 기억을 이길 수 없다"

 블로그에 정리하는 습관을 들이기 시작하면, 억지로라도 하루에 몇 걸음씩은 나아갈 수 있을 거라고 생각했는데 지금 상황이 딱 그런 것 같다. 다른 일정들 때문에 몸이 피곤해도 기록을 하루라도 거르지 않기 위해서 의자에 앉게 된다. 아쟈아쟈!