Flexbox 및 속성 - 설명

과거에 CSS 레이아웃은 웹 디자이너에게 큰 골칫거리였습니다. 반응형 레이아웃을 만들려면 HTML 전체에서 여러 div를 사용해야 하며 이를 수용하도록 CSS를 수정해야 합니다. Flexbox는 이러한 문제 없이 반응형 레이아웃을 만드는 방법입니다. 다음은 flexbox가 무엇이고 어떻게 작동하는지에 대한 소개입니다.

표시하다


  • 이것은 플렉스 컨테이너를 나타냅니다.
  • 그것은 모든 자식의 플렉스 컨텍스트를 가능하게 합니다.
  • 인라인 또는 블록일 수 있습니다.

  • .div{
      display: flex;
    }
    


    플렉스 방향


  • 플렉스 컨테이너에 배치된 항목인 플렉스의 방향을 정의합니다.
  • 단방향 레이아웃 개념입니다.

  • .container {
     flex-direction: row | row-reverse | column | column-reverse;
    }
    


  • 행(기본값): ltr에서 왼쪽에서 오른쪽으로; 오른쪽에서 왼쪽으로
  • 행 역방향: ltr에서 오른쪽에서 왼쪽으로; 왼쪽에서 오른쪽으로
  • 열: 행과 동일하지만 위에서 아래로
  • column-reverse: row-reverse와 동일하지만 아래에서 위로

  • 플렉스 랩


  • 기본적으로 항목은 한 줄에 맞추려고 합니다.

  • .container {
      flex-wrap: nowrap | wrap | wrap-reverse;
    }
    



  • nowrap - 모든 플렉스 항목이 한 줄에 표시됩니다.

  • wrap - 플렉스 항목은 위에서 아래로 여러 줄로 래핑됩니다.

  • wrap-reverse - 플렉스 항목이 아래에서 위로 여러 줄로 래핑됩니다.

  • 플렉스 흐름


  • flex-wrap 및 flex-direction 속성의 약칭이며 함께 기본 컨테이너의 교차 축을 정의합니다.

  • .container {
      flex-flow: column wrap;
    }
    


    플렉스-수축


  • 그에 따라 플렉스 아이템이 축소되는 능력을 정의합니다.

  • .item {
      flex-shrink: 3; /* default 1 */
    }
    


    음수가 유효하지 않은지 확인

    정렬 자체


  • 플렉스 항목에 대해 기본 정렬을 재정의해야 할 수 있습니다.

  • .item {
      align-self: auto | flex-start | flex-end | center | baseline | stretch;
    }
    


    정렬 내용


  • 교차 축에 추가 공간이 있을 때 플렉스 컨테이너의 선을 정렬합니다.

  • .container {
      align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
    }
    


    주문하다




    .item {
      order: 5; /* default is 0 */
    }
    

    좋은 웹페이지 즐겨찾기