CSS3 Flexbox를 사용하는 방법은 무엇입니까?

기사 출처:

1. 소개

Flexbox는 이름에서 알 수 있듯이 최근 이 속성이 인기를 끄는 CSS3 상자 모델입니다. 주된 이유는 CSS3 사양이 마침내 대중화되었고(또는 IE는 마침내 실패했음) 모바일 장치의 개발로 인해 적응형 길이와 너비에 상당한 유연성을 갖춘 Flexbox가 등장했기 때문입니다. 이 추세.

첫 번째 단계는 Flexbox 상자 모델을 살펴보는 것입니다. W3C 기사에 따르면 Flexbox 모델은 아래 그림과 같습니다. 일반 상자 모델과의 차이점은 Flexbox 상자 모델이 수평 시작점을 갖고 있다는 것입니다. 끝점(주 시작, 주 끝), 세로 시작점과 끝점(교차 시작, 교차 끝), 가로 축과 세로 축(주축, 교차 축)을 가지며 요소에는 가로 크기와 세로 크기(기본 크기)가 있습니다. , 크로스 사이즈)는 매우 중요한 레이아웃 계획입니다. Le Flexbox의 속성을 먼저 살펴보겠습니다. MDN의 CSS elastic box

Display

• flex-Direction

• justify-CONTENT

• ALIGN-Items
  을 참조할 수도 있습니다.
• align-self

• align-content

• flex-wrap

• order

• flex

• 2. 속성 소개
  A , display

디스플레이는 우리에게 친숙한 것입니다. Flexbox의 경우 CSS 속성을 설정하는 방법이 두 가지 더 있습니다. 기본값은 "flex"입니다. 해당 레이아웃 방법은 줄 바꿈을 강제로 수행하지만 display: flex를 설정하는 하위 요소에는 더 유연한 설정이 있습니다. .

또 다른 방법은 "inline-flex"인데, 이는 inline-block과 거의 동일합니다. 즉, display:flex 요소는 display:inline 속성을 덮고 그 뒤에 있는 요소는 래핑되지 않습니다.

이렇게 하면 요소가 플렉스 컨테이너로 정의되고 그 자식 요소가 플렉스 항목으로 정의됩니다. flex 값은 flex 컨테이너를 블록 수준 요소로 만듭니다. inline-flex 값은 Flex 컨테이너를 분할할 수 없는 단일 인라인 수준 요소로 만듭니다.

B, flex-direction

flex-direction은 Flexbox 콘텐츠 요소의 "배열 방향"을 나타내며 4가지 유형이 있습니다.

row: 기본값, 왼쪽에서 오른쪽으로, 위에서 아래로

• row-reverse: row의 반대

• column: 위에서 아래로, 왼쪽에서 오른쪽으로

• column-reverse : 열

C과 반대되는 justify-content
justify-content는 위에서 언급한 Flexbox 상자 모델과 전체 Flexbox의 "수평 정렬" 위치를 결정합니다. 이렇게 엔드포인트, 메인 시작, 메인 엔드가 설정되며, 총 5개의 설정 값이 있습니다.

flex-start: 기본값, 가장 왼쪽 메인 시작 정렬

• flex-end: 가장 왼쪽 메인 시작 정렬

• center: 수평 중앙

• space-between: 평균 콘텐츠 요소 배포, 왼쪽 및 오른쪽 요소는 기본 시작 및 기본 끝과 정렬됩니다

• space-around: 콘텐츠 요소를 균등하게 배포하고 간격도 균등하게 배포됩니다

D, align-items

align-items는 justify-content와 정반대입니다. align-items는 콘텐츠 요소와 전체 Flexbox의 "수직 정렬" 위치를 결정합니다. 위에서 언급한 Flexbox 상자 모델에는 교차 시작과 교차라는 두 가지 끝점이 있습니다. end.align-item과 align-self는 이렇게 총 5가지의 설정값이 있다.

flex-start: 기본값, 위쪽 교차 시작 정렬

• flex-end: 아래쪽 교차 시작 정렬

• center: 세로 가운데

• stretch: 콘텐츠 요소 이동 모든 항목 확장 Flexbox의 높이

• baseline: 모든 콘텐츠 요소의 기준선을 정렬 표준으로 사용

E, align-self

align-self의 설정은 align-item과 동일하지만 목적이 다릅니다. align-self의 기능은 align-item에 적용된 속성을 덮어쓰는 것입니다. align-items는 하위 요소를 위한 것이므로 이전 예제를 직접 사용하여 수정하면 명확해집니다.

• auto

은 상위 요소의 align-items 값으로 설정됩니다. 요소에 상위 요소가 없으면 늘어나도록 설정됩니다.

• flex-start

flex 요소는 교차 축의 시작 부분에 정렬됩니다.

• flex-end
  플렉스 요소는 교차축의 끝에 정렬됩니다.

• center
  Flex 요소는 교차 축의 중앙에 정렬됩니다. 요소의 교차 크기가 Flex 컨테이너보다 크면 양방향으로 동일하게 오버플로됩니다.

• baseline
  모든 플렉스 요소는 기준선을 따라 정렬됩니다.

• stretch
  flex 요소는 컨테이너의 너비와 높이를 기준으로 자체 여백 상자의 교차 크기에 따라 늘어납니다.

F, align-content

방금 언급한 align-items는 한 줄짜리 요소를 처리하기 위한 것입니다. 이 속성은 align-content 속성을 사용해야 합니다. 총 6가지 설정이 있습니다. (예: css-flexbox-demo6.html, W3C 설명)

• flex-start: 기본값, 위쪽 교차 시작 정렬

• flex-end: 아래쪽 교차 끝 정렬

• 중앙: 세로로 정렬 centered

• space-between: 첫 번째 줄과 마지막 줄을 각각 위쪽과 아래쪽에 정렬

• space-around: 각 줄 사이의 간격을 균등하게 분배

• stretch: 모든 콘텐츠 요소 지원 Open

G, flex-wrap

지금 예시에서 flex-wrap 속성을 보았습니다. 이 속성은 콘텐츠 요소를 래핑하는 역할을 합니다. flex 또는 inline-flex의 경우 하위 요소가 한 줄로 배열되고 상위 요소가 탄력적으로 채워지므로 줄을 감싸는 데 flex-wrap을 사용해야 합니다. 설정 값은 세 가지입니다. (예: css-flexbox-demo7.html)

• nowrap: 기본값, 한 줄

• wrap: 여러 줄

• wrap-reverse: 여러 줄이지만 콘텐츠 요소가 반전됨

H, order

방금 flex-wrap 속성에서 요소를 뒤집을 수 있다는 것을 봤습니다. order 속성은 숫자를 직접 지정하여 순서를 작은 것부터 큰 것까지 정렬할 수도 있습니다

I, flex

좋은 와인은 병 속으로 가라앉을 거에요. 인내심을 갖고 다음 내용을 읽어야 핵심을 알 수 있을 거예요, 하하! Flex는 Flexbox에서 가장 중요한 속성이어야 하며 flex는 실제로 "flex-grow", "flex-shrink" 및 "flex-basis"의 세 가지 속성으로 구성됩니다. 단위 없음)을 지정하면 기본값은 flex-grow 형식으로 표시됩니다. 세 가지 속성에 대한 설명은 다음과 같습니다.

flex-grow: 숫자, 단위 없음, flex-basis 길이 하위 요소 " "Small"은 상위 요소에 할당된 길이보다 작으며 해당 "늘이기" 비율은 숫자에 따라 할당됩니다. 기본값은 1입니다. 0으로 설정하면 탄력적 변화가 없으며 음수 값이 될 수 없습니다.

flex-shrink: 숫자, 단위 없음. 하위 요소의 플렉스 기준 길이가 상위 요소에 할당된 길이보다 "큰" 경우 해당 "압축" 비율이 숫자에 따라 할당됩니다. 1 입니다. 0 으로 설정하면 탄력적 변화가 없습니다. 음수 값이 될 수 없습니다.

flex-basis : 상위 요소의 크기 비교 기준으로 사용되는 하위 요소의 기본 크기로 기본값은 0이며, 기본값이 0이므로 이 속성이 설정되지 않은 경우 flex-basis 직접 사용됩니다. 성장 속성과 flex-basis를 자동으로 설정할 수도 있습니다. 자동으로 설정하면 하위 요소가 자체 기본 크기를 기반으로 함을 의미합니다. .

세 가지 속성은 별도로 설정하거나 Flex를 사용하여 함께 설정할 수 있습니다. 다음 예는 동일한 Flexbox를 보여 주며 하위 요소는 서로 다른 너비로 표시됩니다.

HTML코드:

CSS 코드:

애니메이션으로 표현해 보면, 늘어나면 빨간색이 파란색보다 길어지는 것을 볼 수 있지만, 압축하면 늘어나는 것을 볼 수 있습니다. 파란색이 됩니다. 색상이 빨간색보다 길어지므로 반응형 디자인에서 플렉스의 핵심 역할을 더 잘 이해할 수 있습니다!

위 내용은 Flexbox에 대한 완전한 소개입니다. 이렇게 긴 기사에서 단일 CSS3 속성을 소개할 수 있을 것이라고는 생각하지 못했습니다. 그러나 이 새로운 속성으로 인해 레이아웃이 더욱 유연해졌습니다.

위 내용은 CSS3 Flexbox를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!