집 > 기사 > 웹 프론트엔드 > 새로운 CSS 속성인 display:box를 사용하는 방법

새로운 CSS 속성인 display:box를 사용하는 방법

이번에는 새로운 CSS 속성인 display:box를 사용하는 방법과 새로운 CSS 속성인 display:box를 사용할 때 주의사항이 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

1. display:box;

요소에 이 속성을 설정하면 display:inline-block;과 유사하게 해당 요소의 하위 항목을 동일한 수준에 정렬할 수 있습니다.

2. 하위 항목에 다음 속성을 설정할 수 있습니다.

전제 조건: 다음 속성을 사용하려면 디스플레이:box;

　1.box-flex:number;

　1)을 설정해야 합니다. 요소 너비의 상위 숫자 부분

　　　　2) 하위 요소가 고정 너비로 설정된 경우 하위 요소는 고정 너비를 적용하고 고정 너비로 설정되지 않은 다른 단어 요소는 나머지 상위 너비( parent - 고정 너비가 설정된 하위 요소) 전체 너비를 숫자 부분으로 나눕니다

　　3) 하위 요소에 여백 값이 있는 경우 나머지 요소에 따라 너비를 숫자 부분으로 나눕니다(부모 너비-자식 고정) 총 너비-총 여백 값) width

　　2.box-orient:horizontal/vertical

　　 이 속성을 부모에게 설정하면 자식이 가로 또는 세로로 정렬됩니다.

　　참고: 모든 주요 브라우저는 이 속성을 지원하지 않으며 접두사가 붙어야 합니다.

　　1) 가로 배열, 자식의 전체 너비 = 부모의 너비. 부모의 너비가 고정된 경우 자식이 설정한 너비는 유효하지 않으며 자식이 부모의 너비를 채웁니다.

　　2) 세로 배치, 자녀의 전체 키 = 부모의 키. 부모의 높이가 고정되어 있으면 자식이 설정한 높이가 유효하지 않으며 자식이 부모의 높이를 채웁니다.

　3.box-direction:normal/reverse

　　 이 속성을 부모에 설정하여 자식의 순서를 확인합니다.

　　1) 일반 기본값, 자식은 html 순서로 정렬됩니다

　　2) 역방향 역순

　　4.box-align:start/end/center/stretch

　　 부모에서 설정, 자식의 세로 정렬.

　　1) 세로 상단 정렬 시작

　　2) 세로 하단 정렬 종료

　　3) 가운데 세로 가운데 정렬

　　4) 스트레치는 부모가 설정한 키에 맞춰 자식 키를 늘려줍니다. 어린이 키가 잘못되었습니다.

　5.box-pack:start/end/center

　　 부모 수준에서 자식의 가로 정렬을 설정합니다.

　　1) 시작 가로 왼쪽 정렬

　 2) 끝 가로 오른쪽 정렬

　 3) 가운데 가로 가운데 정렬

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 주목해 주세요. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!