CSS3 ??? ????
CSS3? Flex Elastic ???? ?? ?? ??:
? ???? Flex Elastic ????? ?? ??? ?????. ???? ????? ?? ??? ?? ??? ????.
????? ???? ??? ??? ???? ?? ?? ??? ??? ???. ??? ??? ?? ????? ??? ? ?? ?? ??? ?? ???? ??? ???? ????? ??? ??? ?????. ?? ??? ???????.
?? ?? ??: ??? ?? ??? ?? ? ???? ??? ????.
(1) Flexbox? ?? ?? ???.
(2).CSS3 Flexbox ??? ?? ??? ???.
1. Flex Elastic ??????:
Flex? ??? ????? ???? Flex Box? ?????.
?? ????? ??? ????, ? Flex ?????? ??? ? ????.
?? ?? ??? ???????.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ipnx.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
#box {
display:flex;
width:300px;
height:100px;
justify-content:space-between;
align-items:center;
background:#ccc;
}
#box span {
border-radius:50px;
background:green;
width:50px;
height:50px;
}
</style>
</head>
<body>
<div id="box">
<span></span>
<span></span>
</div>
</body>
</html>? ??? ??? ????? ??? ??? ?????.
????? ??? ?????? ????? ?? ??? ??? ? ????.
#box{
display: flex;
}
內(nèi)聯(lián)元素也可以設(shè)置為彈性布局，代碼如下:
#box{
display: inline-flex;
} 2. ??? ????? ??:
Flex ????? ???? ??? Flex ????(Flex ????) ?? ??? "????"?? ???.
????? ?? ?? ??? ???? "??"??? ?? Flex ??(??? ??)??? ?? ????? ???? ???.
?????? ??? ????.
?????? ?? ??? ??? ??? ????.
(1) ??: ?? ??? ????? ??? ?? ? ?? ?? ?????.
?? ?? ??: ??? ??? ??? ?? "justify-content" ??? ?? ?????.
(2). ?? ??? ? ?? ??: ????? ????? ?? ????? ?? ????? ????? ????? ?????.
(3). ?? ??: ?? ??? ???? ?? ??? ?? ???? ???.
(4) ???: ??? ??? ?? ?????? ???. ??? ?? ?? ??? ?? ?????.
(5) ?? ?? ? ?? ?: ????? ?? ??? ????? ?? ? ?? ?????? ???? ?? ? ? ?????? ????.
(6). ?? ??: ?? ??? ???? ?? ? ??? ?? ? ???? ???.
3.1.flex-direction ??:
? ??? ??? ?? ??? ??? ??? ?????.
?? ??:
#box {
flex-direction: row | row-reverse | column | column-reverse;
}??? ??? ????.
?? ? ??:
(1).row(???): ??? ???? ???? ?? ?? ????.
(2).row-reverse: ??? ???? ???? ??? ?? ????.
(3).column: ??? ????, ???? ?? ????? ????.
(4).column-reverse : ??? ???? ???? ??? ????? ????.
3.2 flex-wrap ??:
????? ??? ? ?("?")? ?????.
flex-wrap ??? ? ?? ?? ?? ?? ?? ??? ??? ?????.
?? ??:
#box{
flex-wrap: nowrap | wrap | wrap-reverse;
}?????? ??? ????.
?? ? ??:
(1) nowrap (???): ??? ??.
(2) ??? : ???, ? ?? ?? ? ?? ???.
(3) Wrap-reverse : ? ??, ? ?? ?? ??? ????.
3.3 flex-flow ??:
? ??? flex-direction ??? flex-wrap ??? ?????. ???? row nowrap???.
?? ??:
#box {
flex-flow: <flex-direction> || <flex-wrap>;
}3.4 justify-content ??:
justify-content ??? ??? ?? ??? ?????.
?? ??:
#box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}?????? ??? ????.
???? ??:
5?? ?? ?? ? ??? ???? ??? ? ??? ??? ????. ??? ??? ???? ?????? ?????.
(1).flex-start (???): ?? ??
(2).flex-end: ??? ??
(3).center: ???
(4).space-between: ?? ? ??, ?? ?? ??? ?????.
(5).space-around: ? ??? ?? ??? ?????. ??? ?? ??? ??? ??? ??? ??? ??? ? ????.
3.5 align-items ??:
? ??? ??? ???? ???? ??? ?????.
?? ??:
#box {
align-items: flex-start | flex-end | center | baseline | stretch;
}?????? ??? ????.
?? ? ??:
5?? ?? ??? ? ????. ???? ??? ???? ??? ?????. ????? ???? ??? ??? ?????.
(1).flex-start: ???? ???? ?????.
(2).flex-end: ???? ??? ?????.
(3).center: ???? ???? ?????.
(4).baseline: ?? ???? ? ?? ?? ??? ?????.
(5) ???(???): ??? ??? ???? ??? ???? ??? ?? ????? ?? ??? ?????.
3.6 align-content ??:
? ??? ?? ?? ??? ?????. ????? ?? ??? ?? ?? ? ??? ??? ????.
?? ??:
#box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}?????? ??? ????.
??? ??:
(1).flex-start: ???? ???? ?? ?????.
(2).flex-end: ???? ??? ?? ?????.
(3).center: ???? ???? ?? ?????.
(4).space-between: ???? ?? ?? ????, ? ??? ??? ??? ????? ???.
(5).space-around: ? ?? ?? ??? ?????. ??? ? ??? ??? ?? ??? ??? ??? ? ????.
(6).stretch(???): ?? ?? ?? ?? ?????.
4.1 ?? ??:
? ??? ??? ??? ?????. ?? ???? ??? ?????. ???? 0???.
?? ??:
.item {
order: <integer>;
}?????? ??? ????.
4.2.flex-grow ??:
? ??? ??? ?? ??? ???? ???? 0???.
?, ?? ??? ??? ???? ????.
?? ??:
.item {
flex-grow: <number>; /* default 0 */
}??? ??? ????.
?? ??? flex-grow ??? 1? ?? ??? ??(?? ??)? ???? ????.
4.3.flex-shrink ??:
? ??? ??? ?? ??? ???? ???? 1???. ?, ??? ???? ??? ?????.
?? ??:
.item {
flex-shrink: <number>; /* default 1 */
}??? ??? ????.
?? ??? flex-shrink ??? 1? ?? ??? ??? ?? ???? ?? ?????.
? ??? flex-shrink ??? 0?? ?? ??? 1? ?? ??? ??? ??? ? ???? ????.
4.4 flex-basis ??:
? ??? ?? ??? ???? ?? ??? ???? ?? ??(?? ??)? ?????.
? ??? ???? ????? ??? ?? ??? ??? ?????. ???? ????? ?? ??? auto???.
?? ??:
.item {
flex-basis: <length> | auto; /* default auto */
}4.5.flex ??:
? ??? flex-grow, flex-shrink ? flex-basis? ?????. ???? 0 1 auto???. ??? ? ??? ?? ?????.
?? ??:
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}? ???? ??(1 1 ??)? ??(0 0 ??)??? ? ?? ??? ?? ????.
4.6 align-self ??:
? ??? ???? ?? ??? ?? ??? ?? ??? ?? ? ??? align-items ??? ???? ? ????.
???? auto??, ?? ?? ??? align-items ??? ???? ?????. ?? ??? ??? ????? ?????.
?? ??:
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}?????? ??? ????.
? ??? 6?? ?? ?? ? ???, ??? ???? ???? align-items ??? ??? ?????.
