CSS flexbox 초보자 가이드 - 1부

CSS flexible layout module(약칭 flexbox)는 웹 레이아웃 모델로 유연한 레이아웃을 디자인하는 데 도움이 된다.이것은 용기 안의 항목을 화면 크기에 따라 자동으로 정렬할 수 있도록 합니다.
본고에서 flexbox의 주요 속성을 소개하고 어떻게 작동하는지 보여 드리겠습니다.첫 번째 부분은 flex 용기에 영향을 주는 속성에 관한 것이고 두 번째 부분은 flex 프로젝트에 영향을 주는 속성에 관한 것이다.
flexbox를 사용하면 항목이 주 축과 가로축 뒤에 표시됩니다.
말 그대로 주 축은 항목을 표시하는 주 축이다.기본적으로 주 축은 수평입니다.
가로축은 주축에 수직이고 그 방향은 주축의 방향에 달려 있다.기본적으로 가로축은 수직입니다.

flexbox를 사용하기 시작하려면 먼저 용기를 설명하고 몇 개의div를 추가해야 합니다. 예를 들어.

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
</div>

용기를 유연하게 하려면 용기 디스플레이를 flex로 설정해야 합니다.우리는 또 용기 안의 물품에 약간의 양식을 추가할 것이다.

.container{
display: flex;
}

.item {
  background-color: #f5f;
  border: 2px solid #0000;
  padding: 2rem;
  font-size: 2rem;
}

flexbox의 주요 기능은 다음과 같습니다.

벤드 방향

부드러운 포장

유연성 유량

증명 내용

항목 정렬

정렬

굽은 방향

flex direction 속성은 flexbox 용기 내의 항목이 어느 방향으로 배치될지 표시합니다.
그것은 네 가지 가치가 있다.

세계 기타

세계 기타 지역 후진

열

회전기둥 반전

1. 줄
행 값이 기본값이며 항목이 왼쪽에서 오른쪽으로 수평으로 정렬됩니다.

    .container{
    display: flex;
     flex-direction: row;
    }

2. 역전
행 반전 값은 항목을 오른쪽에서 왼쪽으로 수평으로 정렬합니다.

 .container{
    display: flex;
    flex-direction: row-reverse;
 }

3. 칼럼
열 값은 항목을 위에서 아래로 수직으로 정렬합니다.

  .container{
    display: flex;
    flex-direction: column;
  }

4. 열 반전
열 반전 값은 항목을 아래에서 위로 수직으로 정렬합니다.

  .container{
    display: flex;
    flex-direction: column-reverse;
  }

부드러운 포장

만약 여러 항목이 있고 용기가 넘치는 같은 줄에 나타난다면, 용기를 포장해야 하는지 여부를 지정하기 위해 flex wrap 속성을 사용합니다.
1. 소포
wrap 값 지정은 넘침을 방지하기 위해 항목을 여러 줄로 분해해야 합니다.넘침을 초래할 수 있는 모든 부품은 새 파이프에 설치될 것이다.

  .container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

2. 노라프
이것은 기본값입니다. 사용하면 항목을 한 줄에 유지합니다.

 .container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }

탄성류

flex flow 속성은 flex direction과 flex wrap의 약자 속성입니다.

.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

코드는 상술한 내용을 작성하는 것이 아니라 아래와 같다

.container{
display: flex;
flex-flow: row wrap;
}

증명 내용이 정당하다

이 속성은 flex direction을 사용하여 이전에 지정한 방향으로 flex 컨테이너의 항목을 정렬하는 데 사용됩니다.
1. 유연한 시작
이것은 기본값으로 용기의 시작 항목을 정렬합니다.

  .container{
    display: flex;
    justify-content: flex-start;
  }

2. 부드러운 끝
이 값은 컨테이너 끝의 항목을 정렬합니다.

  .container{
    display: flex;
    justify-content: flex-end;
  }

3. 중심
이 값은 컨테이너 중심의 항목을 정렬합니다.

 .container{
    display: flex;
    justify-content: center;
  }

4.주위 공간
이 값은 항목 주위에 빈 칸이 있는 줄에 항목을 고르게 분포합니다.

 .container{
    display: flex;
    justify-content: space-around;
 }

5.시공평형
이 값은 두 항목 사이에 같은 간격을 추가합니다.

 .container{
    display: flex;
    justify-content: space-evenly;
 }

6.공간
이 값은 항목을 선으로 균일하게 표시합니다.첫 번째 요소는 행의 시작에 있고 마지막 요소는 행의 끝에 있습니다.

 .container{
    display: flex;
    justify-content: space-between;
 }

항목 정렬

이 속성은 주 축에 수직인 가로 축을 따라 탄성 항목을 정렬하는 데 사용됩니다.
이 속성을 더 잘 보여주기 위해서 용기 높이를 200px로 설정하고 배경색을 검은색으로 설정합니다.
1. 스트레칭
이것은 컨테이너를 채우기 위해 항목을 밀어내는 기본값입니다.

 .container{
    display: flex;
    align-items: stretch;
 }

2. 유연한 시작
이 값은 컨테이너의 맨 위에 있는 항목을 정렬합니다.

 .container{
    display: flex;
    align-items: flex-start;
 }

3. 부드러운 끝
이 값은 컨테이너 하단의 항목을 정렬합니다.

 .container{
    display: flex;
    align-items: flex-end;
 }

4. 중심
이 값은 컨테이너 중심의 항목을 정렬합니다.

 .container{
    display: flex;
    align-items: center;
 }

컨텐트 정렬

이 속성은 유연선을 정렬하는 데 사용됩니다.이것은 용기를 wrap flex wrap: wrap으로 설정하고 flex 항목이 여러 줄 있는 경우에만 적용됩니다.
이 속성을 더 잘 보여주기 위해서, 나는 Height를 500px로 설정하고, flex wrap 속성을 wrap로 설정합니다.
1. 스트레칭
기본값입니다.그것은 남은 공간을 차지하기 위해 기존 노선을 확장할 것이다.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
 }

2. 유연한 시작
이 값은 용기의 첫머리에 부드러운 선을 표시합니다.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
 }

3. 부드러운 끝
이 값은 용기 밑에 있는 줄을 표시합니다.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
  }

4. 중심
이 값은 컨테이너 중심의 선을 표시합니다.

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
 }

5.주위공간
이 값은 선을 고르게 분포하고 선 주위에 공간을 남긴다.

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    }

6.공간
이 값은 용기에 고르게 분포될 것이다.첫 번째 줄은 용기의 시작에 있고, 마지막 줄은 용기의 끝에 있다.

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }

이것은 내가 계획한 CSS flexbox에 관한 두 편의 문장 시리즈의 첫 부분이다.추가 또는 질문이 있으면 댓글에 추가하십시오.
읽어주셔서 감사합니다!