집 > 기사 > 웹 프론트엔드 > 유연한 유연한 상자 모델의 CSS justify-content 속성

유연한 유연한 상자 모델의 CSS justify-content 속성

高洛峰원래의: 2017-02-23 09:51:332049검색

인스턴스

는 Flexbox 객체의 e388a4556c0f65e1904146cc1a846bee 요소에 있는 항목 주위에 공백을 둡니다.

피
{
디스플레이: 플렉스;
정렬 -내용: 공간-주변;
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手册网(www.shouce.ren)</title>
<style>
#main {
    width: 400px;
    height: 150px;
    border: 1px solid #c3c3c3;
    display: -webkit-flex; /* Safari */
    -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
}

#main div {
    width: 70px;
    height: 70px;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本浏览器不支持 justify-content 属性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通过 -webkit-justify-content 属性支持该属性。</p>

</body>
</html>

효과 미리보기

브라우저 지원

표의 숫자는 이 속성을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

-webkit-, -ms- 또는 -moz- 바로 뒤에 오는 숫자는 이 접두사 속성을 지원하는 첫 번째 버전입니다.

"bsChrome" style="패딩: 5px; 줄 높이: 1.42857143; 수직 정렬: 상단; 테두리: 1px 솔리드 #dddddd; 너비: 127px; 배경 위치: 50% 50%"> "패딩: 5px; 줄 높이: 1.42857143; 수직 정렬: 상단; 테두리 너비: 1px 1px 1px 0px; 테두리 스타일: 단색 단색 없음; 테두리 상단 색상: #dddddd; 테두리 오른쪽 색상: #dddddd; border-bottom-color: #dddddd">justify-content

속성

属性
justify-content	29.0 21.0 -webkit-	11.0	28.0 18.0 -moz-	9.0 6.1 -webkit-	17.0

21.0 -webkit-11.0 28.018.0 -moz- 9.06.1 -webkit- 17.0 /tr>

정의 및 사용법

justify-content는 플렉스 박스 요소의 주축(가로축) 방향 정렬을 설정하거나 검색하는 데 사용됩니다.

팁: 항목을 교차 축(세로)에 정렬하려면 align-content 속성을 사용하세요.

默认值：	flex-start
继承：	否
可动画化：	否。请参阅 CSS3动画属性、CSS3动画实例。
版本：	CSS3
JavaScript 语法：	object.style.justifyContent="space-between" 效果预览

CSS 설명

속성값

값	설명	테스트
flex-start	기본값입니다. 항목이 컨테이너의 시작 부분에 있습니다.	효과 미리보기
flex-end	항목은 컨테이너 끝에 있습니다.	효과 미리보기
center	아이템은 용기 중앙에 위치합니다.	효과 미리보기
공백	행 사이에 공백이 있는 컨테이너 안에 항목이 있습니다.	효과 미리보기
공간주변	항목은 각 행 앞, 사이, 뒤에 공백이 있는 컨테이너에 배치됩니다.	효과 미리보기
초기	이 속성을 기본값으로 설정합니다. 이니셜을 참조하세요.	효과 미리보기
상속	상위 요소에서 이 속성을 상속합니다. 상속을 참조하세요.

유연한 유연한 상자 모델의 CSS justify-content 속성과 관련된 추가 기사 PHP 중국어 홈페이지를 주목해주세요!

성명：

이전 기사：유연한 유연한 상자 모델의 CSS 순서 속성다음 기사：유연한 유연한 상자 모델의 CSS 순서 속성

유연한 유연한 상자 모델의 CSS justify-content 속성

인스턴스

브라우저 지원

정의 및 사용법

CSS 설명

속성값

관련 기사