<style>
main {
width: 220px;
height: 300px;
border: 1px solid black;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
main div {
-webkit-flex: 1; /* Safari 6.1+ */
flex: 1;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">RED</div>
<div style="background-color:lightblue;">BLUE</div>
<div style="background-color:lightgreen;">Green div with more content.</div>
</div>
stretch
默认值。项目被拉伸以适应容器。
测试 »
center
项目位于容器的中心。
测试 »
flex-start
项目位于容器的开头。
测试 »
flex-end
项目位于容器的结尾。
测试 »
baseline
项目位于容器的基线上。
测试 »
initial
设置该属性为它的默认值。请参阅 initial。
测试 »
inherit
从父元素继承该属性。请参阅 inherit。
