TIL - CSS-Flexbox

2693 단어 cssflexboxbeginners
요소를 행이나 열로 배열하기 위한 레이아웃 방법으로 사용 가능한 공간에 자동으로 적응하고 재배열을 용이하게 합니다.
상위 컨테이너(CSS display:flex 속성 포함)에는 정렬할 하위 요소(항목)가 포함됩니다.
  • Guide to Flexbox

  • interactive Flexbox
  • combine rules
  • flex-size of items
  • good explanation of each flexbox-rule

  • flexbox로 사진 중앙에




    .imgContainer{
      display: flex;
      justify-content: center; 
      align-items: center;
      overflow: hidden;
      height: 700px
    }
    img{
      flex-shrink: 0;
      min-width: 100%;
      min-height: 100%
    }
    


    바닥글을 맨 아래로 밀기




    .wrapper{ 
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        min-height: 100vh; 
    }
    


    Great Game to memorize flexbox rules

    좋은 웹페이지 즐겨찾기