mirror of
https://github.com/servo/servo.git
synced 2025-06-23 08:34:42 +01:00
51 lines
No EOL
1.7 KiB
HTML
51 lines
No EOL
1.7 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
|
<title>CSS Test: Flex-grow Property of Block-level Flex Items</title>
|
|
<style type="text/css">
|
|
@page { font: italic 8pt sans-serif; color: gray;
|
|
margin: 7%;
|
|
counter-increment: page;
|
|
@top-left { content: "CSS Flexible Box Layout Module Level 1 CR Test Suite"; }
|
|
@top-right { content: "Test flex-grow-001"; }
|
|
@bottom-right { content: counter(page); }
|
|
}
|
|
</style>
|
|
<link rel="author" title="Hanrui Gao" href="mailto:hanrui.gao@gmail.com" />
|
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#propdef-flex-grow" />
|
|
<link rel="match" href="reference/flex-grow-001-ref.xht" />
|
|
<meta name="flags" content="" />
|
|
<meta name="assert" content="'flex-grow' property specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed." />
|
|
<style type="text/css"><![CDATA[
|
|
#container {
|
|
width: 240px;
|
|
height: 60px;
|
|
border: 1px solid #000;
|
|
display: flex;
|
|
}
|
|
#container > div {
|
|
width: 30px;
|
|
height: 100%;
|
|
}
|
|
#child_1 {
|
|
flex-grow: 0;
|
|
background-color: green;
|
|
}
|
|
#child_2 {
|
|
flex-grow: 1;
|
|
background-color: blue;
|
|
}
|
|
#child_3 {
|
|
flex-grow: 2;
|
|
background-color: gray;
|
|
}
|
|
]]></style>
|
|
</head>
|
|
<body>
|
|
<div id="container">
|
|
<div id="child_1"></div>
|
|
<div id="child_2"></div>
|
|
<div id="child_3"></div>
|
|
</div>
|
|
</body>
|
|
</html> |