CSS3 신축성 상자

탄성 상자 모형에 대한 지식
1. 간단한 소개
  탄성 박스 모형(Flexible Box 또는 FlexBox)은 CSS3의 새로운 레이아웃 모듈로 공식적으로는 CSS Flexible Box Layout Module라고 하는데 용기 안의 프로젝트의 정렬, 방향, 정렬(프로젝트 크기, 동적 생성 상황에서도)을 실현하고 공백 공간을 분배하는 데 사용된다.신축성 박스 모델의 가장 큰 특징은 하위 요소의 너비와 높이를 동적으로 수정하여 서로 다른 사이즈의 화면 아래에서 적당한 배치를 만족시킬 수 있다는 것이다.
2. 기본 지식
  탄성 상자는 탄성 용기(flex container)와 탄성 서브 요소(flex item)로 구성되며, 탄성 상자는 하나의 주축(main axis)과 하나의 세로축(cross axis)이 있으며, 탄성 서브 요소는 주축을 따라 순서대로 배열되고 옆축은 주축에 수직이다.탄성 용기의 메인 샤프트 시작(main start), 메인 샤프트 끝(main end)과 사이드 샤프트 시작(cross start), 사이드 샤프트 끝(cross end)은 탄성 서브 원소 배열의 시작과 끝 위치를 대표한다.구체적으로 아래의 그림을 볼 수 있다.
속성 분류
1. 탄성용기의 관련 속성
등록 정보
속성 설명
flex-direction
스핀들 방향을 설정하여 탄성자 요소의 정렬 방법을 결정합니다.
flex-wrap
탄성 서브 원소가 탄성 용기 범위를 초과할 때 줄을 바꿀지 여부
flex-flow
flex-direction과 flex-wrap의 단축키, 복합 속성
justify-content
신축성 서브요소 주 축의 정렬 설정
align-items
신축성 서브요소 측면 축의 정렬 설정
align-content
측면 축에 공백이 있고 행이 여러 개인 경우 탄력성 서브요소 측면 축의 정렬을 설정합니다.
a. flex-direction 속성
사용 방법:flex-direction:row |row-reverse |column |column-reverse
속성 값
속뜻
row(기본값)
주 축은 수평 방향입니다.정렬 방향은 페이지의 문서 순서와 같습니다.만약 문서의 순서가ltr라면, 배열 순서는 왼쪽에서 오른쪽이다.만약 문서의 순서가 rtl이라면, 배열 순서는 오른쪽에서 왼쪽입니다.
row-reverse
주 축은 수평 방향입니다.정렬 방향은 페이지의 문서 순서와 상반됩니다.
column
주 축은 수직 방향입니다.위에서 아래로 정렬
column-reverse
주 축은 수직 방향입니다.아래에서 위로 정렬
속성의 효과 맵은 다음과 같습니다.
b. flex-wrap 속성
사용 방법:flex-wrap:nowrap | wrap | wrap-reverse
속성 값
속뜻
nowrap(기본값)
오버플로우 시 줄 바꿈 안 함
wrap
오버플로우 시 자동 줄 바꿈
wrap-reverse
넘칠 때 자동으로 줄 바꾸기, 뒤집기 배열
효과도는 다음과 같습니다.
c. flex-flow 속성
사용 방법:flex-flow:[flex-direction]||[flex-wrap]
의미: 복합 속성(flex-direction과flex-wrap), 탄성 서브 요소의 배열 방식 설정
d. justify-content 속성
사용 방법:justify-content:flex-start |flex-end | center | space-between | space-around
속성 값
속뜻
flex-start(기본값)
주축 정렬 시작, 주축 가로축, ltr 환경에서 왼쪽 정렬
flex-end
주축 끝 정렬, 주축 가로축,ltr 환경에서 오른쪽 정렬
center
가운데 맞춤
space-between
첫 번째, 마지막 하나는 탄성 용기의 가장자리를 맞추고 나머지는 고르게 분포한다
space-around
모두 고르게 분포하다
효과도는 다음과 같습니다.
e. align-items 속성
사용 방법:align-items:flex-start | flex-end | center | baseline | stretch
속성 값
속뜻
flex-start
스핀들 정렬 시작, 스핀들 가로, 위쪽 정렬
flex-end
측면 축 끝 정렬
center
가운데 맞춤
baseline
베이스라인 정렬
stretch(기본값)
측면 축에서 시작하여 측면 축 끝으로 전체 측면 축 깔기
효과도는 다음과 같습니다.
f. align-content 속성
사용 방법:align-content:flex-start | flex-end | center | space-between | space-around | stretch
속성 값
속뜻
flex-start
주축 정렬 시작, 주축 가로축, ltr 환경에서 왼쪽 정렬
flex-end
주축 끝 정렬, 주축 가로축,ltr 환경에서 오른쪽 정렬
center
가운데 맞춤
space-between
첫 번째, 마지막 하나는 탄성 용기의 가장자리를 맞추고 나머지는 고르게 분포한다
space-around
모두 고르게 분포하다
stretch(기본값)
나머지 공간을 차지하기 위해 각 줄을 펼치다.만약 남은 공간이 음수라면, 이 값은flex-start와 같다
효과도는 다음과 같습니다.
2. 탄성 서브원소의 관련 속성
속성 값
속뜻
order
탄성 용기 안의 하위 원소의 순서를 제어하는데, 수치가 작은 것은 앞에 배열하고, 마이너스로 할 수 있다
flex-grow
신축성 하위 요소의 확장 비율 설정
flex-shrink
신축성 서브요소의 수축 비율 설정하기
flex-basis
신축성 서브 요소의 신축 전 기본 크기를 지정합니다.width와height 속성에 해당합니다
flex
flex-grow, flex-shrink와 flex-basis 속성의 복합 속성
align-self
탄성용기의 기본 정렬 설정을 독립된 탄성자 요소로 덮어쓰기 (align-items)
a. order 속성
사용 방법:order:integer number
속성 효과 맵은 다음과 같습니다.
b. flex-grow 속성
사용 방법:flex-grow:number
의미: 신축성 서브 요소의 확장 비율을 설정합니다. 마이너스 값은 허용되지 않으며 기본값은 0입니다.신축성 상자 요소에 설정된 확장 인자를 비율로 삼아 남은 공간을 분배한다.
속성 효과 맵은 다음과 같습니다.
c. flex-shrink 속성
사용 방법: flex-shrink:number
의미: 신축성 서브요소의 수축 비율을 설정합니다. 마이너스 값은 허용되지 않으며 기본값은 1입니다.탄성 상자 요소에 설정된 확장 인자를 비율로 삼아 공간을 수축한다.
속성 효과 맵은 다음과 같습니다.
d. flex-basis 속성
사용 방법: flex-basis: | | auto
의미: 신축성 서브원소의 신축 기준치를 설정하고 마이너스로 허용하지 않습니다.기본값은 auto이며 특정 너비(높이)가 없습니다.
e. flex 속성
사용 방법: flex: none | [flex-grow] | | [flex-shrink] | | [flex-basis
의미: 복합 속성, 탄성 서브 요소의 공간 분배 설정
f. align-self 속성
사용 방법: auto | flex-start | flex-end | center | baseline | stretch
의미: 신축성 서브 요소를 옆축에 맞추는 방식을 설정합니다.align-items와 같습니다.신축성 서브요소의 대립 정렬을 설정합니다.
속성 효과 맵은 다음과 같습니다.
3. 다중 열 속성 설명
1) 기초 지식
  다열(Multi-column)은 CSS3의 새로운 레이아웃 모듈로 공식적으로는 Multiple column layout이라고 하는데 여러 열의 레이아웃을 비교적 쉽게 실현할 수 있다. 예를 들어 그림 폭포류 등이다.
2) 속성 일람
등록 정보
속성 설명
columns
복합 속성(column-width와column-count), 너비와 열 설정
column-width
열당 너비 설정
column-count
열 수 설정
column-gap
열 사이의 간격 설정하기
column-rule
복합 속성(column-rule-width,column-rule-style과column-rule-color), 열 사이의 테두리 스타일 설정
column-fill
열의 높이를 통일할지 설정합니다
column-span
모든 열을 가로질러 할지 여부 설정
a. column-width 속성
사용 방법:column-width:length | auto
속성 값
속뜻
auto(기본값)
브라우저가 열의 너비를 결정합니다.
length
열 너비는 길이 값으로 정의됩니다.음수 허용 안 함
b. column-count 속성
사용 방법:column-count:integer number | auto
속성 값
속뜻
auto(기본값)
열의 수는 "column-width"와 같은 다른 속성에 의해 결정됩니다.
imteger number
정수 값으로 열의 수를 정의합니다. 열의 가장 좋은 수는 원소의 내용을 유출할 수 없습니다.
c. columns 속성
사용방법:columns:[column-width] ｜[column-count]
의미: 복합 속성 설정 열의 너비와 개수
d. column-gap 속성
사용 방법:column-gap:length | normal
속성 값
속뜻
기본값
font-size와 크기가 같습니다.이 대상의 font-size가 16px라고 가정하면normal의 값은 16px로 추정된다.
length
길이를 사용하여 열과 열 사이의 간격을 정의합니다.음수는 허용되지 않습니다.
e. column-rule 속성
사용 방법:column-rule:[column-rule-width]||[column-rule-style]|||[column-rule-color]
의미: 열과 열 사이의 경계선을 설정합니다.border 속성과 비슷합니다
속성 값
속뜻
column-rule-width
열과 열 사이의 경계 두께를 설정합니다.
column-rule-style
열과 열 사이의 경계선의 스타일을 설정합니다
column-rule-color
열과 열 사이의 경계선의 색을 설정합니다
f. column-fill 속성
사용 방법:column-fill:auto | balance
의미: 모든 열의 높이를 통일할지 설정합니다
속성 값
속뜻
auto(기본값)
열 높이 적응형 컨텐츠
balance
모든 열의 높이는 그 중에서 가장 높은 열로 통일된다
g.column-span 속성
사용 방법:column-span:none | all
의미: 대상 요소가 모든 열을 가로질러 있는지 여부
속성 값
속뜻
none(기본값)
부전열
all
모든 열 가로지르기
CSS3 신축성 상자의 기본 지식은 바로 이것입니다. 틀리면 제때에 변경하겠습니다!이 글은 여기서 마치고,
이 글은 블로그 일문 다발 플랫폼 OpenWrite에서 발표합니다!