CSS3 레이아웃 속성은 무엇입니까?

css3 레이아웃 속성에는 flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, flex-grow, flex-shrink 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

1. 유연한 상자 모델(Flexible Box 또는 Flexbox)

Flexbox 모델의 가장 큰 특징은 다양한 크기의 화면에 적합한 레이아웃을 충족하도록 하위 요소의 너비와 높이를 동적으로 수정할 수 있다는 것입니다. .

(1) 유연한 컨테이너 속성

flex-direction: 주축 방향을 설정하고 유연한 하위 요소의 배열을 결정합니다.

flex-wrap: 유연한 하위 요소가 범위를 초과할 때 래핑할지 여부 유연한 컨테이너

flex-flow: flex - 방향 및 플렉스 랩 속성, 복합 속성에 대한 단축키

justify-content: 주축 정렬

align-items: 교차축 정렬

align-content: 가로축, 옆축에 공간이 있는 경우 축 정렬

(2) 유연한 하위 요소 속성

order: 플렉스 컨테이너의 하위 요소 순서 제어

flex-grow: 확장 비율 설정 flex 하위 요소

flex-shrink: 탄성 하위 요소의 수축 비율 설정,

flex-basis: 늘리기 전 탄성 하위 요소의 기본 크기 값을 지정합니다. 이는 너비 및 높이 속성과 동일합니다.

flex : flex-grow, flex-shrink 및 flex-basis 속성의 복합 속성

align-self : 독립적인 유연한 하위 요소가 유연한 컨테이너의 기본 정렬 설정을 재정의하도록 허용

Flexbox 메뉴 항목 실제 전투

      
   
 
HTML
 
CSS
 
JavaScript
 
Sass
 
Ruby
 
Mongo
 
  

.menu{ list-style-type: none; padding: 0; margin: 0; display: flex; flex-flow: row wrap; } .menu li{ height: 40px; text-align: center; line-height: 40px; flex: 1 1 100%; } .menu li:nth-child(1){ background-color: #39ADD1; } .menu li:nth-child(2){ background-color: #3079AB; } .menu li:nth-child(3){ background-color: #982551; } .menu li:nth-child(4){ background-color: #E15258; } .menu li:nth-child(5){ background-color: #CC6699; } .menu li:nth-child(6){ background-color: #52AC43; } @media (min-width:480px) { .menu li{ flex: 1 1 50%; } } @media (min-width:768px) { .menu{ flex-flow: row nowrap; } }

2. 다중 열 상세 설명

속성 목록:

columns: 복합 속성(열 너비 및 열 개수), 열 너비 및 개수 설정

열 너비: 너비 설정 각 열의

column-count: 열 수 설정

column-gap: 열 사이의 간격 설정

column-rule: 복합 속성(column-rule-너비, 열-규칙-스타일, 열-규칙- color), 열 사이의 테두리 스타일을 설정합니다.

column-fill: 열 높이가 균일한지 여부를 설정합니다.

column-span: 모든 열에 걸쳐 있는지 여부를 설정합니다.

3 미디어 쿼리

모범 사례:

/*超小屏幕（手机，小于768px)*/ /*没有任何媒体查询相关的代码，移动设备优先*/ /*小屏幕（平板，大小等于768）*/ @media (min-width: 768px) { } /*中等屏幕（桌面显示器，大于等于992px)*/ @media (min-width: 992px) { } /*大屏幕（大桌面显示器，大于等于1200px)*/ @media (min-width: 1200px) { }

(학습 영상 공유:css 영상 튜토리얼,웹 프론트엔드 입문 튜토리얼)

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