CSS3 ??? ??

CSS3 Flex Box

Flex Box? CSS3? ??? ???? ?????.

CSS3 ??? ??(Flexible Box ?? Flexbox)? ???? ??? ?? ??? ?? ??? ???? ? ? ??? ??? ??? ??? ???? ???? ?????.

Flexbox ???? ??? ???? ??? ????? ?? ??? ? ??? ??, ?? ? ???? ?? ???? ??? ???? ????.

CSS3 ??? ?? ???

Flexible ??? Flex ????? Flex ???? ?????.

???? ????? ????? ?? ?? flex ?? inline-flex? ???? ???? ????? ?????.

??? ?????? ?? ??? ??? ?? ??? ???? ????.

??: ??? ???? ??? ??? ?? ?? ???? ????? ??????. ??? ??? ??? ?? ??? ??? ???? ?? ???? ??? ?????.

Flexible ?? ??? ????? Flexbox ? ? ?? ?????. ????? ????? ??? ?? ????.

?? ??? ???? ????? ???? ???? ??? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<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>

????? ???? ??? ???

?? ??? ??? ? ????.

?? ??? rtl(????? ??)?? ???? ??? ?? ??? ??? ???? ??? ????? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style>
body {
    direction: rtl;
}
.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>

??? ???

flex-direction

flex-direction order? ?? ?????? ??? ?? ??? ??? ???????.

flex-direction: ? | ? ??? | ? | ? ???

flex-direction ?? ??? ????.

row: ???? ????? ??(?? ??) .
row-reverse: ??? ?? ??(??? ??, ??? ???, ??? ??? ? ???.
column: ?? ??.
column-reverse: ??? ?? ??, ??? ???

?? ???? ? ??? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    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>

????? ???? ??? ???.

?? ???? ? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    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>

. ????? ???? ??? ???

?? ???? ? ??? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    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>

????? ???? ??? ???

justify-content ??

??? ??(justify-content) ??? elastic? ?????. ?????? flex ????? ?? ?? ?? flex ??? ?????.

justify-content ??? ??? ????.

justify-content: flex-start | | space-between | space- around

? ? ??:

flex-start:
Flex ??? ?? ?? ??? ?????. ?? ?? ?? ?????. ? ?? ??? ??? ?? ?? ??? ???? ?? ??? ??? ???? ?????.
flex-end:
? ?? ??? ??? ?? ? ?? ????? ??? ????. ?? ? ?? ?? ???? ?? ??? ??? ?? ?? ??? ?????.
center:
??? ??? ?? ?? ??? ?????(??? ??? ?? ??). ?? ??? ??? ?? ??? ??? ????? ?????.
space-between:
?? ??? ????? ?? ??? ?? ?? ??? ??? ???? ?????. flex ??? ??? ?? ? ?? flex-start? ?????. ? ?? flex ??? ??? ?? ?? ?? ????? ???? ??? flex ??? ??? flex-start? ?? ? ????? ?????. ?? ?? ??? ??? ??? ??? ?? ??? ??? ???? ?????.
?? ??: ??? ??? ?? ??? ???? ??? ??? ??? ????. ?? ??? ????? ??? ??? ??? ?? ?? ? ?? center? ?????. ??? ?? ?? Flex ??? ?? ??? ??(?: 20px)?? ?? ?? ???? ? ?? ??? ??? ??? Flex ???? ??? ??? ??? ?? ???(1/2*20px=10px).

??? ?????:

?? ???? flex-end ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    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>

????? ???? ??? ???

?? ???? center ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    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>

???? ??? ???

?? ???? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    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>

????? ???? ??? ???

?? ????? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    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>

????? ???? ??? ???

align-items

align-items ??? ??? ?? ??? ???(???) ?? ??? ????? ?????.

Syntax

align-items: flex-start | flex-end | center | ??? | Stretch )? ?? ?? ??? ?? ?? ? ?? ??? ?? ?????.

flex-end: ????? ??? ???(???) ?? ??? ??? ?? ??? ? ??? ?????.

center: Flexbox ??? ?? ???(???) ??? ?????. (?? ??? Flexbox ??? ???? ??? ????? ??? ??? ???????.)
baseline: ??? ?? ??? ??? ?? ?? ?? ??? ?? ? ?? 'flex-start'? ?????. ??? ??? ? ?? ??? ??? ???? ???.
stretch: ?? ? ??? ???? ?? ?? 'auto'? ?? ?? ?? ??? ?? ?? ??? ? ??? ??? ??? ???? ??? '??/?? ??/??' ??? ?????.

?? ???? ????(???) ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: stretch;
    align-items: stretch;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

????? ???? ??? ???

?? ?? flex-start ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

????? ???? ??? ???

?? ?? flex-end ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

????? ???? ??? ???

?? ???? center ??? ?????.

<!DOCTYPE html>
<html>
<head>
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

????? ???? ??? ???

?? ???? ??? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: baseline;
    align-items: baseline;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 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>

????? ???? ??? ???

flex-wrap ??

flex-wrap ??? ??? ?? ? ?? ??? ?? ??? ???? ? ?????.

Syntax

flex-flow: ||

? ? ??:

nowrap - ????? Flex ????? ? ????. ? ?? ??? ???? ????? ?? ? ????.
wrap - Flex ????? ?? ?? ?????. ? ?? ??? ?? ??? ?? ??? ? ?? ???? ?? ???? ? ??? ?????.
wrap-reverse - ? ?? ??? ??? ???.

?? ???? nowrap ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: 300px;
    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>

????? ???? ??? ???

?? ???? Wrap ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 300px;
    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>

????? ???? ??? ???

?? ????? Wrap-reverse ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
    width: 300px;
    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>

????? ???? ??? ???

align-content ??

align-content ??? flex-wrap ??? ??? ???? ? ?????. align-items? ????? flex ?? ??? ??? ???? ?? ?? ?? ??? ?????.

align-content: ??? ?? | ??? ? | ?? ?? ???? | ??? ??? ????? ?? ?????.

flex-start - ? ?? Flex ????? ?? ??? ?? ????.

flex-end - ??? ????? ?? ?? ?? ????.
center - ? ?? Flexbox ????? ??? ?? ????.
space-between - Flexbox ????? ?? ??? ?????.
space-around - ? ?? Flexbox ????? ??? ???? ?? ?? ?? ?? ??? ??? ??? ?? ???.

?? ???? center? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    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>

??:

?? ? ?:

<integer>: ?? ?? ???? ?? ??? ?????. ?? ?? ?? ?????. ???? ? ????.

order ??? ??? ????? ?? ??? ?? ??? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<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;
}
.first {
    -webkit-order: -1;
    order: -1;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item first">flex item 2</div>
  <div class="flex-item">flex item 3</div>  
</div>
</body>
</html>

?? ????? ? ?? ??? ?? ??? margin-right: auto;? ?????. ??? ??? ?? ???? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: 10px;
}
.flex-item:first-child {
    margin-right: auto;
}
</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>

????? ???? ??? ???

??? ???

?? ?? ??? ????? ???? ??? ??? ???? ?????.

??? ??? ???? ?? ???? ?? ??????. ?? ?? ??? ? ?? ?? ? ???? ??? ??? ???? margin: auto? ???? ???.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">Perfect centering!</div>
</div>
</body>
</html>

????? ???? ??? ???

align-self

align-self ??? ?? ?? ??? ???(???) ?? ??? ???? ? ?????. ??? ??? ??? '????'???.

flex-start: ????? ??? ???(???) ?? ??? ???? ?? ??? ?? ???? ?????.

flex-end: ????? ??? ???(???) ?? ??? ??? ?? ??? ? ??? ?????.

???: ????? ??? ??? ?? ?? ?? ???? ? ?? 'flex -start'? ?????. ??? ??? ? ?? ??? ??? ???? ???.
stretch: ?? ? ??? ???? ?? ?? 'auto'? ?? ?? ?? ??? ?? ?? ??? ? ??? ??? ??? ???? ??? '??/?? ??/??' ??? ?????.

?? ???? ??? ?? ??? ?? ??? align-self ?? ?? ??? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    width: 60px;
    min-height: 100px;
    margin: 10px;
}
.item1 {
    -webkit-align-self: flex-start;
    align-self: flex-start;
}
.item2 {
    -webkit-align-self: flex-end;
    align-self: flex-end;
}
.item3 {
    -webkit-align-self: center;
    align-self: center;
}
.item4 {
    -webkit-align-self: baseline;
    align-self: baseline;
}
.item5 {
    -webkit-align-self: stretch;
    align-self: stretch;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex-start</div>
  <div class="flex-item item2">flex-end</div>
  <div class="flex-item item3">center</div>
  <div class="flex-item item4">baseline</div>
  <div class="flex-item item5">stretch</div>
</div>
</body>
</html>

????? ???? ??? ???

flex

flex ??? ???? ?? ??? ??? ???? ??? ???? ? ?????.

Syntax

flex: none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]

? ? ??:

none: ?? ??? ?? 0 0 auto
[ flex-grow ]: ??? ?? ??? ?? ??? ?????.
[flex-shrink]: ?? ?? ??? ?? ??? ?????.
[ flex-basis ]: ??? ?? ??? ?? ?? ?? ?????.

?? ??? ? ?? ??? ?? ??? ??? 2/4? ???? ??? ? ??? ??? 1/4? ?????.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文網(wǎng)(php.cn)</title> 
<style> 
.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}
.flex-item {
    background-color: cornflowerblue;
    margin: 10px;
}
.item1 {
    -webkit-flex: 2;
    flex: 2;
}
.item2 {
    -webkit-flex: 1;
    flex: 1;
}
.item3 {
    -webkit-flex: 1;
    flex: 1;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item item1">flex item 1</div>
  <div class="flex-item item2">flex item 2</div>
  <div class="flex-item item3">flex item 3</div>  
</div>
</body>
</html>

????? ???? ??? ???

CSS3 flex box attribute

?? ??? ??? ??? ????? ???? ??? ???? ????.

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <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>

?????? ???

????

?? ?? ?? ??

???? ??

??? ??

?? ??
???? ????

?? ????? ????? ? ????. ?? ???? ???? ????. ???? ? ??? ?? ?? ??????~

? ??? ??? ???? ???? ????.

Attribute	Description
display	HTML ?? ?? ??? ?????.
flex-direction	? ??? ????? ?? ?? ??? ?????.
justify-content	? ??? ?? ??? ??(???) ?? ??? ?????.
align-items	??? ?? ??? ??? ???(???) ???? ?????.
flex-wrap	??? ??? ?? ??? ?? ????? ??? ? ???? ??? ?????.
align-content	??? ???? flex-wrap ??? ??? ?????. Align-ITEMS. ??? ?? ?? ??? ???? ?? ???? ?? ? ? ??? ?? ??? ?? ?? ??? ?? ?? ?? ??? ???? ?? ?????.
align-self	flex ?? ??? ?????. ????? align-items ??? ??????.
flex	??? ??? ?? ??? ??? ???? ??? ?????.

<u id="iyorg"></u>

亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

CSS3 ??? ??

????CSS3 ???? ????

????Firebug ???? ????

????SOAP ???? ????

????jQuery ???? ????

????AJAX ???? ????

????SQL ???? ???? ???

????Git ???? ??? ????

??Webpack ???? ??? ????

??Gulp ???? ??? ????

??Sass ???? ???? ??? ????

???Laravel 4 ???? ??? ????

????jQuery? ???? ?? ?? ??? ????