전체 플렉스박스 가이드

반응형

플렉스박스

플렉스박스의 도움을 받아 Response 웹 사이트를 개발하고 쉽게 구현할 수 있습니다. 플렉스박스는 속성과 주요 내용물이 있는 컨테이너 내부에 블록을 포함하는 컨테이너입니다.

플렉스박스 특성

 

1.표시
주어진 값에 따라 유동 컨테이너 인라인 또는 블록을 정의합니다. 모든 직계 자식들을 위한 유연한 컨텍스트를 가능하게 한다.

.container {
    display: flex; 
}

2.가변 방향
플렉스 방향은 하위 항목의 방향을 정의합니다. 기본값은 열, 열 반전 및 행 반전 표시로 변경할 수 있습니다.

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

3.flex-defined
플렉스 워(flex-war) 방식의 대응 영역 사용은 모든 유형의 장치에 적용됩니다. 그것은 4가지 특성 랩, 무랩 및 랩 리버를 포함합니다.

 

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

4.플렉스 랩
유연한 아이템들은 모두 한 라인에 맞추려고 할 것이다. 이 속성을 사용하여 필요에 따라 항목을 줄 바꿈할 수 있습니다.

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

5.유동
플렉스 컨테이너의 주 축과 교차 축을 함께 정의하는 플렉스 방향 및 플렉스-랩 속성에 대한 요약입니다.

.container {
    flex-flow: column wrap;
}

 

6.190-함량
이것은 주축을 따라 정렬을 정의합니다. 라인 상의 모든 플렉스 아이템이 유연하지 않거나 유연하지만 최대 크기에 도달했을 때 남는 여유 공간을 분산하는 데 도움이 됩니다.

.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | 
}
    ```

    7.align-discute
    플렉스 항목이 현재 선에서 십자축을 따라 배치되는 방법에 대한 기본 동작을 정의합니다. 가로축에 대한 정당성-내용 버전이라고 생각하면 됩니다.

    ```js
    .container {
      align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end 
      }
      ```

      8.align 내용
      이는 가로축에 여유 공간이 있을 때 플렉스 컨테이너의 선을 정렬하며, 이는 주축 내에 개별 항목을 정렬하는 방법과 유사합니다.

      <div class="content-ad"></div>

      ```js
      .container {
        align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline 
        }
        ```

        이것은 flexbox 속성과 사용의 끝이 아니라 웹 개발에 주로 사용되는 주요 속성들은 used와 함께 위에 나열되어 있다. 웹 개발 분야에서 쉽고 중요한 flexbox부터 시작합니다.

        안녕하세요 저는 인도 웹개발자 가네쉬입니다. 프리랜싱 | 웹개발 및 콘텐츠 작성에 관련된 콘텐츠는 트위터에서 저와 연결해 주세요.

        나의 최근 기사를 확인하세요.

        - 100일 프로젝트
        - types.js 사용 방법
        - HTML CSS를 사용한 응답형 탐색 모음

        <div class="content-ad"></div>