(HTML, CSS) items 속성값들 (flex-grow,flex-shrink, flex-basis,order)

2021. 3. 16. 16:34·💻 개발/HTML, CSS
728x90
반응형

flex-grow 컨테이너를 꽉 채우기 위해 늘어난다.

flex-grow를 사용하지 않으면 페이지가 작아지던 커지던 일정한 사이즈를 유지하지만,

flex-grow를 사용하면 페이지에 맞춰 그에 해당하는 사이즈를 유지한다.

item1에 flex-grow:3

item 2에 flex-grow:1

item3에 flex-grow:1

적용된 모습 item 1은 3배만큼 커진다.

flex-shrink 페이지가 작아지면 어떻게 적용할지 지정한다.

페이지가 줄어들 때 flex-shrink: 숫자만큼 주어 줄어들 경우 어떠한 사이즈로 줄어들지 정해준다.

기본값은 0이다.

페이지가 줄어들 때 flex-shrink:3으로 준 item1은 3배로 줄어든다.

flex-basis 아이템들이 공간을 얼마나 차지해야 하는지 세부적으로 도와주는 역할

기본적으로 flex-basis: auto를 사용한다.

item1에 flex-basis:30%

item 2에 flex-basis:10%

item3에 flex-basis:60%만큼 주었다.

페이지의 weight에 따라 화면에 배치된 item의 %에 따라 사이즈가 달라진다.

align-self item별로 item들을 정렬할 수 있다.

item 하나만 특별하게 배치하고 싶을 때 align-self: center을 이용한다.

order / 아이템의 위치를 조정하는 데 사용되고 기본 값은 0으로 되어 있다.

order의 순서에 따라 배치된 모습, 만약 order의 순서가 겹친다면 위에서 아래 순서로 적용이 된다.

 

 

728x90
반응형

'💻 개발 > HTML, CSS' 카테고리의 다른 글

(HTML CSS) 동영상 전체화면 구성하기, 스크롤 시 다음 section 보이게 하기 /  (0) 2021.03.28
(HTML CSS) SVG, PNG 파일 이미지 색 변경하기  (2) 2021.03.25
(HTML, CSS) justify-content, align-items, align-content에 대해 알아보기  (0) 2021.03.16
(HTML, CSS) Flex Box 이해하기(flex-direction, flex-wrap, flex-flow)  (0) 2021.03.16
(HTML, CSS) display, position 웹사이트 레이아웃 만들기  (0) 2021.03.16
'💻 개발/HTML, CSS' 카테고리의 다른 글
  • (HTML CSS) 동영상 전체화면 구성하기, 스크롤 시 다음 section 보이게 하기 /
  • (HTML CSS) SVG, PNG 파일 이미지 색 변경하기
  • (HTML, CSS) justify-content, align-items, align-content에 대해 알아보기
  • (HTML, CSS) Flex Box 이해하기(flex-direction, flex-wrap, flex-flow)
foodev
foodev
이것저것 개발과 이것저것 리뷰 합니다.
    250x250
  • foodev
    개발 개맛집
    foodev
  • 전체
    오늘
    어제
    • 분류 전체보기 (110)
      • 🌟🙇🏻‍♂️ 꼭 읽어봤으면 하는 글 (4)
      • 💻 개발 (73)
        • 설정 및 세팅 (4)
        • DB&서버&네트워크&암호 (11)
        • React (0)
        • JPA, Querydsl (14)
        • 알고리즘 (7)
        • 언어 (15)
        • 프레임워크 (12)
        • HTML, CSS (10)
      • ✍🏻 (32)
        • 회고록 (14)
        • 독서록 (7)
        • 일지록 (10)
        • 세미나 (1)
      • 💡 리뷰 (1)
        • 제품리뷰 (1)
  • 인기 글

  • 최근 댓글

  • 최근 글

  • 반응형
  • hELLO· Designed By정상우.v4.10.3
foodev
(HTML, CSS) items 속성값들 (flex-grow,flex-shrink, flex-basis,order)
상단으로

티스토리툴바