기사 출처:
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는 하위 요소를 위한 것이므로 이전 예제를 직접 사용하여 수정하면 명확해집니다.
은 상위 요소의 align-items 값으로 설정됩니다. 요소에 상위 요소가 없으면 늘어나도록 설정됩니다.
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)
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
