CSS3 ??? ??(??? ??)
CSS3 Flex Box
Flex Box? CSS3? ??? ???? ?????.
CSS3 ??? ??(Flexible Box ?? Flexbox)? ???? ??? ?? ??? ?? ??? ???? ? ? ??? ??? ??? ??? ???? ???? ?????.
Flexbox ???? ??? ???? ??? ????? ?? ??? ? ??? ??, ?? ? ???? ?? ???? ??? ???? ????.
CSS3 ??? ?? ???
Flexible ??? Flex ????? Flex ???? ?????.
???? ????? ????? ?? ?? flex ?? inline-flex? ???? ???? ????? ?????.
??? ?????? ?? ??? ??? ?? ??? ???? ????.
??: ??? ???? ??? ??? ?? ?? ???? ????? ??????. ??? ??? ??? ?? ??? ??? ???? ?? ???? ??? ?????.
Flexible ?? ??? ????? Flexbox ? ? ?? ?????. ????? ????? ??? ?? ????.
?? ??? elastic ?? ??? ???? ????? ? ?? ???? ?? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 400px;
height: 250px;
background-color: lightgrey;
}
.flex-item {
background-color: cornflowerblue;
width: 100px;
height: 100px;
margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">flex item 1</div>
<div class="flex-item">flex item 2</div>
<div class="flex-item">flex item 3</div>
</div>
</body>
</html>??? ??? ?? ?? ?? ??? ? ??? ?????.
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
</style>
</head>
<body>
<div>
<p>發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>? ??? ?????. ?? ?? ?????:
<html>
<head>
<meta charset="utf-8">
<style>
p{
width:150px;
border:3px solid lightblue;
background:lightgreen;
padding:5px;
margin:5px;
}
div{
display:-webkit-box;
display:box;
}
</style>
</head>
<body>
<div>
<p>發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃哈薩克的骨灰撒塊光輝卡薩很干凈啊是高科技傻空給</p>
<p>發(fā)生過(guò)的空間還是看價(jià)格哈健康啊水果和卡刷卡更何況規(guī)劃</p>
</div>
</body>
</html>???, ?? ?? p ??? ??? ?????. ??? ??? ????? ?????!
???? div ??? ??? ?? ????? ?? ??? ??? ??????. ?? ???? ??? ?? -webkit- ???? ???? ???.
??? ????? ?? ???? ? ?? ?? ?? ????.
box: ???? ?? ??? ?? ?? ?? ??? ?????. inline-box: ???? ?? ??? ??? ?? ?? ??? ?????.
PS: ??? ?? ????? div ??? ?? ?? ?? ????? ??? ????? ?? ??? ?? ?? ?? ???? ????. ??? ??? ?? ??? ??? ???? ??? ???? ???? ??????. ?? ?? ????? div ??? ??? ???? div ?? ??? p ??? ???? ????.
box-orient ??
box-orient ??? ?? ?? ?? ??? ?? ??? ?????.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
}??? ??? ?? ?????.
? ??? ?? ?? ??? ????.
horizontal: ??? ??? ???? ????? ??? ?????. Vertical: ??? ??? ???? ??? ?????. ??? ??? inline-axis: flex ??? ??? ?? ?? ???? ?????. block-axis: ??? ??? ?? ?? ?? ???? ?????.
??? ? ?? ????. ?? ? inline-?? ?? ??? ?????. ?? ? ?? ?? ?? ???? ?????.
?? ?? ??
box-direction ??? ?? ?? ??? ?????? ?? ??? ???? ? ?????.
div{
display:-webkit-box;
display:box;
-webkit-box-direction:reverse;
box-direction:reverse;
}? ??? ?? ?? ??? ????.
normal : ?? ??, ??? reverse : ??
box-pack ??
box-pack ??? ?? ??? ????? ?? ??? ?????.
? ??? ?? ?? ??? ????.
start : ??? ??? ???? ????? end : ??? ??? ??? ????? center : ??? ??? ???? ????? justify : ?? ???? ??? ???? ????
???? ?? ??? ?????. ? ?? ?? ??? ???????.
?? ?? ?:
div{
-webkit-box-pack:start;
box-pack:start;
}2.end ?? ?:
div{
-webkit-box-pack:
end
;
box-pack:
end
;
}3.center ?? ?:
div{
-webkit-box-pack:
center
;
box-pack:
center
;
}4.justify ???:
div{
-webkit-box-pack:
justify
;
box-pack:
justify
;
}PS: ?? ???? ?? ??? ????? ??? ???? ??? ??? ????. ??? ??? ?? ?? ??? ???? ???(????? ?? ?? ????). ?? ?????? ??? ? ? ????. ???? ??? ??? ?????.
box-align ??
box-align ??? ?? ??? ????? ?? ??? ???? ? ?????.
? ??? ?? ?? ??? ????.
?? ： ????? ????? ??? ???? ?? ??? ?? ??? ?????. ? ： ????? ????? ??? ???? ?? ?? ??? ?? ??? ???? ?????. ： ????? ????? ??? ???? ?? ??? ?? ??? ???? ?????. ?? ?? ???: ?? ??? ????? ???? ???? ?? ?? ??? ????. ????: ?? ??? ???? ?? ????? ????
????. ????? ? ?? ?? ??? ??? ?????.
1.start ?? ?
div{
display:-webkit-box;
display:box;
-webkit-box-align:start;
box-align:start;
} 2.end ?? ?
div{
display:-webkit-box;
display:box;
-webkit-box-align:
end
;
box-align:
end
;
}3.center ?? ?
div{
display:-webkit-box;
display:box;
-webkit-box-align:
center
;
box-align:
center
;
}4. ??? ?? ?
box-orient? ??? ?? ? ?? ??? ?? ?? ?? ??? ???? ?? ?????.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-align:baseline;
box-align:baseline;
}??? ?? ??? ?? ? ?? ??? ?? ?? ?? ??? ??? ???? ?????.
div{
display:-webkit-box;
display:box;
-webkit-box-orient:vertical;
box-orient:vertical;
-webkit-box-align:baseline;
box-align:baseline;
}5.stretch ?? ?
?? ?? ??? ?? ??? ??? ?? ?????.
div{
display:-webkit-box;
display:box;
-webkit-box-align:stretch;
box-align:stretch
;}box-flex ??
box-flex ??? ?? ??? ??? ???? ?? ??? ??? ??? ??? ? ????. ? ??? ????? ??? ?? ?????. ?? ????? ??? ???? ??? ?????.
p:nth-child(1){
-webkit-box-flex:1;
box-flex:1;
}p:nth-child(2){
-webkit-box-flex:3;
box-flex:3;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}?? ?? ??? ?? ??? ?? ? ??? ?? ??? ??? ??? ?????. ?? ??, ???? ? ?? p ??? ?? ??? ?????? ????.
p:nth-child(2){
-webkit-box-flex:2;
box-flex:2;
}p:nth-child(3){
-webkit-box-flex:1;
box-flex:1;
}? ?? ???? ??? ??? ?? ??? ???.
box-ordinal-group ??
box-ordinal-group ??? ??? ???? ?? ??? ??? ? ????.
p:nth-child(1){
-webkit-box-ordinal-group:2;
box-ordinal-group:2;
}p:nth-child(2){
-webkit-box-ordinal-group:3;
box-ordinal-group:3;
}p:nth-child(3){
-webkit-box-ordinal-group:1;
box-ordinal-group:1;
}????? ? ?? p ??? 2?, ? ?? p ??? 3?, ? ?? p ??? 1?? ?????. ? ??? p ??? ?? ????? ??? ? ??? ?? ??? ?? ???? ?????.
?, ?? ?? ??? ?? ??? ???? ??????. ? ? ????? ????? ??? ?? ?? ??? ???.
??? ?? ? ?? ?? ??? ????.
div{
display:-webkit-box;
display:box;
height:500px;
border:1px solid #f00;
-webkit-box-pack:center;
box-pack:center;
-webkit-box-align:center;
box-align:center;
}???? p ??? ?? ??? ??????.
p{
width:150px;
height:200px;
}CSS3 ?? ?? ??
?? ??? ?? ??? ????? ???? ??? ???? ????.
?? ????????????????????????????????????????????????????????????????HTML ?? ?? ??? ?????.
flex-direction? ??? ????? ?? ?? ??? ?????.
