코딩하는기계

Flex layout

· 2018-10-01 (월) 11:34:17 · 3024

Flex 속성은. flex-container안의 item 들을 배치하는데 이용됩니다.

 

Flex continaer의 flex-direction 값을 이용해 Item들은 행이나 열로 배치할 수 있습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex-direction

 

flex안의 item 들은 기본적으로 3가지의 속성값을 가집니다.

flex-basis 해당 아이템의 최소크기를 결정합니다.

flex-grow 컨테이너가 늘어날 때(컨테이너에 남는 공간이 생길 때) 어느정도의 공간을 할당받을지 결정합니다.

flex-shrink 컨테이너가 줄어들 때(컨테이너의 공간이 부족할 때) 어느정도로 공간이 줄어들지 결정합니다.

 

일단 item들은 최소크기 이상으로는 줄어들지 않습니다.

https://developer.mozilla.org/ko/docs/Web/CSS/flex

|
댓글을 작성하시려면 로그인이 필요합니다.

퍼블리셔팁

1,282건

퍼블리싱과 관련된 유용한 정보를 공유하세요. 질문은 상단의 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
기타 19-01-09 조회 2,042
기타 19-01-09 조회 3,938
기타
[기타]
19-01-09 조회 3,587
기타 18-11-28 조회 2,702
기타 18-11-28 조회 2,335
CSS 18-11-27 조회 3,278
CSS 18-11-21 조회 2,559
HTML 18-11-06 조회 3,913
CSS 18-10-01 조회 3,025
CSS 18-09-28 조회 2,767
기타 18-09-22 조회 2,614
기타 18-03-15 조회 3,200
CSS 18-03-02 조회 5,402
HTML 18-02-05 조회 3,552
기타 18-01-10 조회 3,171
기타 18-01-10 조회 2,575
기타 18-01-10 조회 2,717
CSS 18-01-08 조회 3,010
CSS 18-01-08 조회 2,584
CSS 18-01-08 조회 2,825
CSS 18-01-04 조회 2,535
CSS 18-01-04 조회 2,788
CSS 18-01-04 조회 2,601
기타 17-12-06 조회 2,651
기타 17-12-06 조회 2,454
기타 17-12-06 조회 2,336
기타 17-12-04 조회 2,570
기타 17-12-04 조회 2,110
기타 17-12-04 조회 2,338
HTML 17-12-03 조회 3,995