Flexbox를 배치하는 방법은 무엇입니까? 자세한 튜토리얼
- 云罗郡主앞으로
- 2018-10-23 15:23:062828검색
이 글의 내용은 Flexbox Flex Box를 배치하는 방법에 관한 것입니다. 자세한 튜토리얼에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
CSS3 가변 상자 모델에서는 box-flex 속성을 사용하여 가변 상자 내부의 하위 요소에 가변 공간이 있는지 여부를 정의할 수 있습니다. 하위 요소에 가변 공간이 있는 경우 가변 상자(상위 요소)의 크기가 확대되거나 축소되면 가변 공간이 있는 하위 요소의 크기도 확대되거나 축소됩니다. Flexbox에 추가 공간이 있을 때마다 Flexspace가 있는 하위 요소도 해당 공간을 채우기 위해 크기를 확장합니다.
참고:
box-flex 속성의 값은 정수 또는 소수이며 음수가 될 수 없으며 기본값은 0입니다.
상자에 box-flex 속성이 정의된 여러 하위 요소가 포함된 경우 브라우저는 이러한 하위 요소의 box-flex 속성 값을 추가한 다음 해당 값의 비율에 따라 배포합니다. 총 가치까지 상자에 남은 공간입니다.
box-flex 속성은 유연한 상자의 너비나 높이가 결정될 때만 유효합니다. 즉, 상위 요소에 대해 너비 또는 높이 속성 값을 먼저 정의해야 합니다.
유연한 상자 내부 요소의 총 너비와 높이가 항상 유연 상자의 너비와 높이와 동일하도록 유연한 공간 설정을 사용하세요. 그러나 하위 요소의 플렉스 공간은 플렉스 상자가 특정 너비나 높이를 갖는 경우에만 적용됩니다.
예:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-flex属性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
width:200px;
height:150px;
}
#box1
{
background:red;
-webkit-box-flex:1.0;
}
#box2
{
background:blue;
-webkit-box-flex:2.0;
}
#box3
{
background:orange;
-webkit-box-flex:1.0;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>브라우저의 미리보기 효과는 다음과 같습니다.
분석:
여기에서 "box-orient:horizontal;"을 사용하여 유연한 상자 내부 하위 요소의 수평 배열을 정의합니다. 유연한 상자의 너비를 200px로 지정합니다. 그 후에는 box-flex 속성을 사용하여 각 하위 요소의 값을 지정하기만 하면 브라우저가 자동으로 각 하위 요소의 비율을 계산하고 자동으로 너비를 나눕니다.
위는 Flexbox Flexbox를 배치하는 방법입니다. 자세한 튜토리얼에 대한 전체 소개, CSS3 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.
위 내용은 Flexbox를 배치하는 방법은 무엇입니까? 자세한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!