css flex

0307kwon·2021년 3월 1일
0

css

목록 보기
1/2

[css] {flex} - 3

내용

  • 기존 css에서 불가능하거나 굉장히 어렵게 구현했던 것들을 좀 더 쉽게 구현 할 수 있도록 css3에서 추가된 레이아웃 방식.
  • flex는 자식 요소에게만 적용된다. 후손은 적용되지 않음
  • flex의 방향에 따라 scale 100%의 기준이 달라짐
    - ex
    flex-direction: row
    => 자식의 width 100%는 부모 flex-container 기준
    flex-direction: column
    => 자식의 width 100%는 다른 max값을 찾아감(예상과 달라짐)
    height 100%는 부모 flex-container 기준임

링크

개구리 게임(진짜 도움됨)
flexbox로 만들수 있는 10가지 레이아웃

profile
상상을 현실로 꺼내길 좋아하는 프론트엔드 개발자입니다.

0개의 댓글