天天看點
傳回

CSS3_04_彈性盒子_多媒體

CSS3_04_彈性盒子_多媒體
CSS3_04_彈性盒子_多媒體

CSS3 彈性盒子(Flex Box)

彈性盒子是 CSS3 的一種全新的布局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox）， 是一種  當  頁面需要适應不同的螢幕大小以及裝置類型時   確定元素擁有恰當的行為的  布局方式。

引入彈性盒布局模型的目的是提供一種更加有效的方式  來對一個容器中的子元素進行排列、對齊和配置設定空白空間。

浏覽器支援

表格中的數字表示支援該屬性的第一個浏覽器的版本号。

緊跟在數字後面的 -webkit- 或 -moz- 為指定浏覽器的字首。

屬性 Chrome IE Firefox Safari Opera

Basic support

(single-line flexbox)

29.0

21.0 -webkit-

 11.0

22.0

18.0 -moz-

 6.1 -webkit- 12.1 -webkit-
Multi-line flexbox

29.0

21.0 -webkit-

 11.0 28.0 6.1 -webkit-

17.0

15.0 -webkit-

12.1

CSS3 彈性盒子内容

彈性盒子由 彈性容器(Flex container) 和 彈性子元素(Flex item) 組成。

彈性容器 通過設定 display 屬性的值為 flex 或 inline-flex将其定義為彈性容器。

彈性容器内包含了一個或多個 彈性子元素。

注意： 彈性容器外  及  彈性子元素内   是正常渲染的。

彈性盒子  僅僅隻是定義了   彈性子元素  如何在彈性容器内布局。

彈性子元素  通常預設是在 彈性盒子内 一行顯示。

預設情況每個彈性容器  隻有一行。

以下元素展示了彈性子元素在一行内顯示，預設是從左到右:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 250px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        預設是一行内顯示所有的子元素,從左和右排列
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

當然我們可以修改 排列方式。

如果我們設定 

direction

 屬性為 

rtl

 (right-to-left),

所有元素都從右上方開始,從右往左依次排列

彈性子元素的排列方式也會改變，頁面布局也跟着改變:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 250px;
            color:white;
            background-color:#008CBA;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 100px;
            margin: 10px;
        }
        /*核心代碼*/
        body {
            /*在文檔最右上方開始,從右往左依次排列子元素*/
            direction: rtl;
        }
    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        預設是一行内顯示所有的子元素,從左和右排列<br/>
        但,如果給body設定了屬性direction:rtl;<br/>
        那麼就會在最右上方開始,從右往左依次排列子元素
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

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;

}

flex-direction

flex-direction

 順序指定了彈性子元素在父容器中的位置。

文法 

flex-direction: row | row-reverse | column | column-reverse

flex-direction

的值有:

  • row：橫向從左到右排列（左對齊），預設的排列方式。
  • row-reverse：反轉橫向排列（右對齊，從後往前排，最後一項排在最前面。
  • column：縱向排列。
  • column-reverse：反轉縱向排列，從後往前排，最後一項排在最上面。

以下執行個體示範了 

row-reverse

 的使用:

從右上方開始 ,從右往左依次排列子元素

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 250px;
            color:white;
            background-color:#008CBA;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*核心代碼:在彈性容器内的最右上方開始,從右往左依次排列子元素,類似于direction:rtl的功能*/
            -webkit-flex-direction:row-reverse;
            flex-direction:row-reverse;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 100px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        預設是一行内顯示所有的子元素,從左和右排列<br/>
        但,如果彈性容器設定了屬性flex-direction:row-reverse<br/>
        那麼,就會在彈性容器内從右往左依次排列<br/>
        效果類似于給body設定direction:rtl;
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: row-reverse;

    flex-direction: row-reverse;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

column

 的使用:

從左上方開始,從上往下依次排列子元素

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#008CBA;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*核心代碼:在彈性容器内的最左上方開始,從上往下依次排列子元素*/
            -webkit-flex-direction:column;
            flex-direction:column;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 50px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        預設是一行内顯示所有的子元素,從左和右排列<br/>
        1.如果彈性容器設定了屬性flex-direction:row-reverse<br/>
        那麼,就會在彈性容器内最右上方開始 從右往左依次排列子元素<br/>
        效果類似于給body設定direction:rtl;<br/>
        2.如果彈性容器設定了屬性flex-direction:column<br/>
        那麼,就會在彈性容器内最左上方開始,從上往下依次排列子元素

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: column;

    flex-direction: column;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

column-reverse

 的使用:

從彈性容器的左下方開始 ,從下往上依次排列子元素

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*核心代碼:在彈性容器内的最左下方開始,從下往上依次排列子元素*/
            -webkit-flex-direction:column-reverse;
            flex-direction:column-reverse;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 50px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        預設是一行内顯示所有的子元素,從左和右排列<br/>
        1.如果彈性容器設定了屬性flex-direction:row-reverse<br/>
        那麼,就會在彈性容器内最右上方開始 從右往左依次排列子元素<br/>
        效果類似于給body設定direction:rtl;<br/>
        2.如果彈性容器設定了屬性flex-direction:column<br/>
        那麼,就會在彈性容器内最左上方開始,從上往下依次排列子元素<br/>
        3.如果彈性容器設定了屬性flex-direction:column-reverse<br/>
        那麼,就會在彈性容器内最左下方開始,從下往上依次排列子元素

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: column-reverse;

    flex-direction: column-reverse;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

CSS3_04_彈性盒子_多媒體

justify-content 屬性 

内容對齊（justify-content）屬性 應用在彈性容器上，

把 彈性項(即子元素) 沿着 彈性容器 的主軸線（main axis）對齊。

CSS3_04_彈性盒子_多媒體

justify-content 文法如下：

justify-content: flex-start | flex-end | center | space-between | space-around
CSS3_04_彈性盒子_多媒體

各個值解析:

  • flex-start：

    彈性項目向 行頭 緊挨着填充。這個是預設值。第一個彈性項(即子元素)的main-start外邊距  邊線 (即左邊線)  被放置在  該行的main-start邊線(即該行的左邊線)，而後續的 彈性項(即子元素們) 依次從左往右 依次平齊擺放。

  • flex-end (右對齊)：

    彈性項目向行尾緊挨着填充。最後1個彈性項的main-end外邊距邊線(即右邊線)被放置在 該行的main-end邊線(即該行的最右邊) ，而它前面的 續彈性 項依次平齊擺放 (說得這麼複雜,就是右對齊)。

  • center：

    彈性項目 居中緊挨着填充。（如果剩餘的自由空間是負的，則 彈性項目 将在最左和最右兩個方向上同時溢出）。

  • space-between：

    彈性項目平均分布在該行上。如果剩餘空間為負或者隻有一個彈性項，則該值等同于flex-start(即預設的排列方式)。否則，第1個彈性項的外邊距(即最左邊) 與 該行的main-start邊線(即該行的最左邊)對齊，而最後1個彈性項的外邊距(即最右邊) 與 該行的main-end邊線(即該行的最右邊)對齊，然後剩餘的 彈性項 平均分布在該行上，相鄰 項目 的間隔是一樣的。

  • space-around：

    彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩餘空間為負或者隻有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此之間的間隔是相等滴（比如是20px），同時首尾兩邊 和 彈性容器之間留有一半的間隔（比如為1/2*20px=10px）。

效果圖展示：

CSS3_04_彈性盒子_多媒體

以下執行個體示範了 

flex-end

 的使用:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*右對齊*/
            -webkit-justify-content:flex-end;
            justify-content:flex-end;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 50px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        justify-content:flex-end(右對齊)

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-justify-content: flex-end;

    justify-content: flex-end;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

center

 的使用:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*居中*/
            -webkit-justify-content:center;
            justify-content:center;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 50px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        justify-content:center

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-justify-content: center;

    justify-content: center;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

space-between

 的使用:

最左邊挨着,最右邊挨着,中間等間距

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*最左邊挨着,最右邊挨着,中間等間距*/
            -webkit-justify-content:space-between;
            justify-content:space-between;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 50px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        justify-content:space-between;<br/>
        最左邊挨着,最右邊挨着,中間等間距

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-justify-content: space-between;

    justify-content: space-between;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

space-around

 的使用:

最左邊的間距和最右邊的間距,是 中間的間距的一半

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*最左邊的間距和最右邊的間距,是 中間的間距的一半*/
            -webkit-justify-content:space-around;
            justify-content:space-around;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            height: 50px;
            margin: 10px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        justify-content:space-around;<br/>
        最左邊的間距和最右邊的間距,是 中間的間距的一半

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-justify-content: space-around;

    justify-content: space-around;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

align-items 屬性

align-items

 設定或檢索彈性盒子元素在側軸（縱軸）方向上的對齊方式。

CSS3_04_彈性盒子_多媒體

文法 

align-items: flex-start | flex-end | center | baseline | stretch

各個值解析:

  • flex-start：頂對齊,彈性盒子元素的側軸（縱軸）起始位置的邊界(即頂部)緊靠住該行的側軸起始邊界(即頂部)。
  • flex-end：底部對齊,彈性盒子元素的側軸（縱軸）起始位置的邊界(即底部)緊靠住該行的側軸結束邊界(即底部)。
  • center：垂直居中,彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向上下兩個方向同時溢出相同的長度）。
  • baseline：項目第1行的文本的基線對齊,如彈性盒子元素的行内軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值将參與基線對齊。
  • stretch：如果子元素沒設定高度或為auto,則會充滿整個容器的高度,如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

以下執行個體示範了 

stretch(預設值)

 的使用:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*若item沒設定高度或為auto,将充滿容器的整個高度空間*/
            -webkit-align-items:stretch;
            align-items:stretch;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            /*注意 子元素沒有高度喔,将充滿整個容器的高度*/
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        justify-content:space-around;<br/>
        最左邊的間距和最右邊的間距,是 中間的間距的一半

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: stretch;

    align-items: stretch;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了align-items: 

flex-start;

 的使用: (頂對齊)

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*子元素們将頂對齊*/
            -webkit-align-items:flex-start;
            align-items:flex-start;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            height: 50px;
        }
        /*不同的高度,将頂對齊*/
        div.class_div_flexitem2 {
            height: 70px;
        }
        div.class_div_flexitem3 {
            height: 90px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem class_div_flexitem2">flex item 2</div>
        <div class="class_div_flexitem class_div_flexitem3">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        align-items:flex-start;<br/>
        子元素們将頂對齊

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: flex-start;

    align-items: flex-start;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了align-items: 

flex-end;

 的使用: (底對齊)

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*子元素們将底對齊*/
            -webkit-align-items:flex-end;
            align-items:flex-end;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            height: 50px;
        }
        /*不同的高度,将底對齊*/
        div.class_div_flexitem2 {
            height: 70px;
        }
        div.class_div_flexitem3 {
            height: 90px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem class_div_flexitem2">flex item 2</div>
        <div class="class_div_flexitem class_div_flexitem3">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        align-items:flex-end;<br/>
        子元素們将底對齊

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: flex-end;

    align-items: flex-end;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了align-items: 

center

 的使用:(垂直居中)

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*子元素們将垂直居中對齊*/
            -webkit-align-items:center;
            align-items:center;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            height: 50px;
        }
        /*不同的高度,将垂直居中對齊*/
        div.class_div_flexitem2 {
            height: 70px;
        }
        div.class_div_flexitem3 {
            height: 90px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem class_div_flexitem2">flex item 2</div>
        <div class="class_div_flexitem class_div_flexitem3">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        align-items:center;<br/>
        子元素們将垂直居中對齊

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

    align-items: center;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

baseline

 的使用:(第1行的文本基線對齊)

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
            /*子元素們将按第1行文本的基線對齊*/
            -webkit-align-items:baseline;
            align-items:baseline;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            height: 50px;
        }
        /*不同的高度,不同字型大小喔*/
        div.class_div_flexitem2 {
            height: 70px;
            font-size: 24px;
        }
        div.class_div_flexitem3 {
            height: 90px;
            font-size: 28px;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem class_div_flexitem2">flex item 2</div>
        <div class="class_div_flexitem class_div_flexitem3">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        align-items:baseline;<br/>
        子元素們将按第1行文本的基線對齊

    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: baseline;

    align-items: baseline;

    width: 400px;

    height: 250px;

    background-color: lightgrey;

}

flex-wrap 屬性

flex-wrap 屬性用于指定彈性盒子的子元素換行方式。

預設情況下，項目都排在一條線（又稱"軸線"）上。

flex-wrap屬性定義，如果一條軸線排不下，如何換行。

文法 

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

各個值解析:

  • nowrap - 預設，彈性容器為單行。該情況下   彈性子項  可能會溢出容器。
  • wrap - 彈性容器為多行。該情況下彈性子項溢出的部分會被放置到新的1行，子項内部會發生斷行
  • wrap-reverse -反轉 wrap 排列。說得那麼高大上的樣子,意思就是溢出的一行不是放到新的一行,而是放在上面的一行罷了

以下執行個體示範了 

nowrap

 的使用:溢出部分就看不到了...

注意:必須給子元素item限制是最小寬度min-width,不然彈性盒子會自動将item縮小

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;

            /*不換行*/
            -webkit-flex-wrap:nowrap;
            flex-wrap:nowrap;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            height: 50px;
            /*必須限制最小寬度,不然彈性盒子會預設把它縮小*/
            min-width: 100px;
        }
        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
        <div class="class_div_flexitem">flex item 4</div>
        <div class="class_div_flexitem">flex item 5</div>
        <div class="class_div_flexitem">flex item 6</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        flex-wrap:nowrap;不換行,會溢出<br/>
        必須限制item最小寬度,不然彈性盒子會預設把它縮小
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: nowrap;

    flex-wrap: nowrap;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

wrap

 的使用: 會換行,且每一行将平分容器的高度

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;

            /*會換行,且每一行将平分容器的高度*/
            -webkit-flex-wrap:wrap;
            flex-wrap:wrap;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            /*如果沒有高度會自動填滿*/
            height: 50px;
        }
        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
        <div class="class_div_flexitem">flex item 4</div>
        <div class="class_div_flexitem">flex item 5</div>
        <div class="class_div_flexitem">flex item 6</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        flex-wrap:nowrap;會換行<br/>
        且每一行将平分容器的高度
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap;

    flex-wrap: wrap;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}

以下執行個體示範了 

wrap-reverse

 的使用:

會換行,且每一行将平分容器的高度,且溢出的那部分内容在上方

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;

            /*會換行,且每一行将平分容器的高度,且溢出的那部分内容在上方*/
            -webkit-flex-wrap:wrap-reverse;
            flex-wrap:wrap-reverse;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            /*如果沒有高度會自動填滿*/
            height: 50px;
        }
        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
        <div class="class_div_flexitem">flex item 4</div>
        <div class="class_div_flexitem">flex item 5</div>
        <div class="class_div_flexitem">flex item 6</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        flex-wrap:wrap-reverse;<br/>
        會換行,且每一行将平分容器的高度,且溢出的那部分内容在上方
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-container {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-wrap: wrap-reverse;

    flex-wrap: wrap-reverse;

    width: 300px;

    height: 250px;

    background-color: lightgrey;

}

align-content 屬性

align-content屬性定義了多根x軸線的在垂直方向上的對齊方式。如果項目隻有一根軸線，該屬性不起作用。

align-content

 屬性用于修改 

flex-wrap

 屬性的行為。類似于 

align-items

, 但它不是設定彈性子元素的對齊，而是設定各個行的軸線之間的對齊。

CSS3_04_彈性盒子_多媒體

文法 

align-content: flex-start | flex-end | center | space-between | space-around | stretch

各個值解析:

  • stretch

      - 預設。各行将會高度方向上垂直伸展以占用全部的剩餘空間。

  • flex-start

      - 各行的x軸線,向彈性盒容器的頂部起始位置堆疊。

  • flex-end

      - 各行的x軸線,向彈性盒容器的底部結束位置堆疊。

  • center

      -各行的x軸線,向彈性盒容器的中間位置堆疊。

  • space-between

      -各行的x軸線,在彈性盒容器中平均分布,第1行緊貼頂部,最後1行緊貼底部,中間行平分間距。

  • space-around

      - 各行的x軸線,在彈性盒容器中平均分布，頂部和頂邊之間的間距, 底部行和底邊之間的間距 是 子元素與子元素之間垂直間距的1/2高。

以下執行個體示範了 

center

 的使用:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;

            /*會換行,且每一行将平分容器的高度*/
            -webkit-flex-wrap:wrap;
            flex-wrap:wrap;

            /*align-content:center;<br/>
        該屬性隻針對于wrap的多行的x軸線們 在 垂直方向上的均布*/
        -webkit-align-content:center;
        align-content:center;
            
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            /*如果沒有高度會自動填滿*/
            height: 50px;
        }
        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
        <div class="class_div_flexitem">flex item 4</div>
        <div class="class_div_flexitem">flex item 5</div>
        <div class="class_div_flexitem">flex item 6</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        flex-wrap:wrap;<br/>
        align-content:center;<br/>
        該屬性隻針對于wrap的多行的x軸線們 在 垂直方向上的均布
        
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.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;

}

align-content:flex-start;效果如下:(注意每一行的x軸線們在垂直方向上的分布)

CSS3_04_彈性盒子_多媒體

align-content:flex-end;效果如下:(注意每一行的x軸線們在垂直方向上的分布)

CSS3_04_彈性盒子_多媒體

align-content:stretch;(預設的)效果如下:(注意每一行的x軸線們在垂直方向上的分布)

CSS3_04_彈性盒子_多媒體

align-content:space-between;效果如下:(注意每一行的x軸線們在垂直方向上的分布)

多餘空間全部 在各行的x軸之間垂直均布

CSS3_04_彈性盒子_多媒體

align-content:space-around;效果如下:(注意每一行的x軸線們在垂直方向上的分布)

多餘的空間全部像泡沫一樣填充在各行的x軸之間,隻是最上邊和最下邊的泡沫是各行的x軸之間的泡沫的1/2

CSS3_04_彈性盒子_多媒體

彈性  子元素  屬性 

排序

文法 

order:

各個值解析:

  • <integer>：用整數值來定義排列順序，order的數值小的排在前面。可以為負值。

order

 屬性設定彈性容器内 彈性 子元素 的屬性:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            /*如果沒有高度會自動填滿*/
            height: 50px;
        }
        /* 彈性子元素的屬性*/
        div.class_div_head {
            /*order 越小越在前,可為負數*/
            -webkit-order:-1;
            /*标準寫法寫最後*/
            order:-1;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem class_div_head">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        彈性子元素的屬性order<br/>
        order 越小越在前,可為負數
        
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-item {

    background-color: cornflowerblue;

    width: 100px;

    height: 100px;

    margin: 10px;

}

.first {

    -webkit-order: -1;

    order: -1;

}

對齊

設定"margin"值為"auto"值時,它将自動擷取彈性容器中所有的剩餘的空間。

是以設定垂直方向margin值為"auto"，可以使彈性子元素在彈性容器的兩個軸的方向上都完全居中。

以下執行個體在第1個彈性子元素上設定了 

margin-right: auto;

 。

它将自動把容器中所有的剩餘的空間 全部放置在該子元素的右側：

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 100px;
            margin: 10px;
            /*如果沒有高度會自動填滿*/
            height: 50px;
        }
        /* 彈性子元素的屬性*/
        div.class_div_flexitem:first-child {
            /*它将自動把容器中所有的剩餘的空間 全部放置在該子元素的右側*/
            margin-right: auto;
        }

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">flex item 1
        </div>
        <div class="class_div_flexitem">flex item 2</div>
        <div class="class_div_flexitem">flex item 3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        第1個彈性子元素的屬性margin-right:auto;<br/>
        它将自動把容器中所有的剩餘的空間全部放置在該子元素的右側
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-item {

    background-color: cornflowerblue;

    width: 75px;

    height: 75px;

    margin: 10px;

}

.flex-item:first-child {

    margin-right: auto;

}

完美的居中

以下執行個體将完美解決我們平時碰到的居中問題。

使用彈性盒子，居中變的很簡單，隻想要設定 

margin: auto;

 可以使得彈性子元素在XY兩軸方向上完全居中:

item中的文本在垂直方向居中還有一點麻煩,這兒是把line-height設定成item的height一樣值了...應該還有其他更好的辦法吧?

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 80px;
            /*如果沒有高度會自動填滿*/
            height: 80px;
            /* 完美居中 */
            margin: auto;
            /*文本居中
            讓行高等于div的高度???*/
            text-align: center;
            line-height: 80px;
        }
        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem">那朵花</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        子元素的marign:auto;可以實作完美居中
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.flex-item {

    background-color: cornflowerblue;

    width: 75px;

    height: 75px;

    margin: auto;

}

align-self

align-self

 屬性用于設定彈性元素自身在側軸（縱軸Y）方向上的對齊方式。

align-self屬性允許單個子項目有與其他項目不一樣的對齊方式，可覆寫align-items屬性。

預設值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

CSS3_04_彈性盒子_多媒體

文法 

align-self: auto | flex-start | flex-end | center | baseline | stretch

各個值解析:

  • auto：如果'align-self'的值為'auto'，則其計算值為元素的父元素的'align-items'值，如果其沒有父元素，則計算值為'stretch'。
  • flex-start：彈性盒子元素的側軸（縱軸Y）起始位置的邊界(即頂邊)緊靠住該行的側軸起始邊界(即容器的頂部)。
  • flex-end：彈性盒子元素的側軸（縱軸Y）起始位置的邊界(即底邊)緊靠住該行的側軸結束邊界(即容器的底部)。
  • center：彈性盒子元素在該行的側軸（縱軸Y）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
  • baseline：如彈性盒子元素的行内軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值将參與基線對齊。
  • stretch：如果子元素沒設定height,或者為auto,則充滿容器的高度;如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

以下執行個體示範了彈性子元素上 align-self 不同值的應用效果：

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        div.class_div_flexitem {
            background-color: #555555;
            width: 80px;
            /*如果沒有min-height,将會自動縮放;不能寫高度,寫了高度stretch就沒效果了*/
            min-height: 80px;
            margin: 10px;
        }
        /*頂對齊*/
        div.class_div_flexitem1 {
            -webkit-align-self:flex-start;
            align-self:flex-start;
        }
        /*底對齊*/
        div.class_div_flexitem2 {
            -webkit-align-self:flex-end;
            align-self:flex-end;
        }
        /*垂直居中*/
        div.class_div_flexitem3 {
            -webkit-align-self:center;
            align-self:center;
        }
        /*貌似還是頂對齊*/
        div.class_div_flexitem4 {
            -webkit-align-self:baseline;
            align-self:baseline;
        }
        /*垂直方向上填充滿*/
        div.class_div_flexitem5 {
            -webkit-align-self:stretch;
            align-self:stretch;
        }

        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem class_div_flexitem1">flex-start</div>
        <div class="class_div_flexitem class_div_flexitem2">flex-end</div>
        <div class="class_div_flexitem class_div_flexitem3">center</div>
        <div class="class_div_flexitem class_div_flexitem4">baseline</div>
        <div class="class_div_flexitem class_div_flexitem5">stretch</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        子元素的align-slef屬性可以定制自身單獨在Y軸上的位置<br/>
        可覆寫容器的align-items屬性
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.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;

}

flex 類似于Android中的權重weight

flex

 屬性用于指定彈性子元素如何配置設定空間。

文法 

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

各個值解析:

  • none：none關鍵字的計算值為: 0 0 auto
  • [ flex-grow ]：定義彈性盒子元素的擴充比率。
  • [ flex-shrink ]：定義彈性盒子元素的收縮比率。
  • [ flex-basis ]：定義彈性盒子元素的預設基準值。

以下執行個體中，第一個彈性子元素占用了 2/4 的空間，其他兩個各占 1/4 的空間:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            width: 400px;
            height: 300px;
            color:white;
            background-color:#4CAF50;
            /*核心代碼
            預設它的所有子元素會一行排列
            标準的寫最後面*/
            display: -webkit-flex;
            display: flex;
        }
        /*item沒有寬和高,要自适應*/
        div.class_div_flexitem {
            background-color: #555555;
            margin: 10px;
        }
        /*第1個item在x方向上權重為2*/
        div.class_div_flexitem1 {
            -webkit-flex:2;
            flex:2;
        }
        /*第2個item在x方向上權重為1*/
        div.class_div_flexitem1 {
            -webkit-flex:1;
            flex:1;
        }
        /*第3個item在x方向上權重為1*/
        div.class_div_flexitem1 {
            -webkit-flex:1;
            flex:1;
        }
        

    </style>  
</head>  
  
<body>  
    <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
    </h1>  
    <div class="class_div_flexcontainer">
        <div class="class_div_flexitem class_div_flexitem1">flex-item-1</div>
        <div class="class_div_flexitem class_div_flexitem2">flex-item-2</div>
        <div class="class_div_flexitem class_div_flexitem3">flex-item-3</div>
    </div>
    <p class="sgcontentcolor sgcenter" style="clear:left;">
        <b>注意:</b>display:flex<br/>
        子元素的flex:2;屬性可以定制自身單獨在X軸上的權重(即所占的寬度百分比)<br/>
    </p>
    <footer id="copyright" style="clear:both;">  
        <p style="font-size:14px;text-align:center;font-style:italic;">  
        Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
        </p>        
    </footer>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

.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;

} 下面将使用強大的flex布局建立一個響應式頁面,酷炫diao炸天

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="中國成人教育網-免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,彙編,日語,英語,泰語,韓語,俄語,粵語,阿語,魔方,樂理,動漫,PR,PS,AI,AE">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div.class_div_flexcontainer {
            text-align: center;
            /*核心代碼:flex布局*/
            display: -webkit-flex;
            display: flex;
            /*子元素将換行
            flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。*/
            -webkit-flex-flow:row wrap;
            flex-flow:row wrap;
        }
        /*所有的第1級子元素*/
        div.class_div_flexcontainer > * {
            /*權重都為1 100%*/
            flex:1 100%;
            padding: 10px;
        }
        /*響應式布局
        寬度大于600時,aside各占50%*/
        @media all and (min-width: 500px) {
            aside.class_aside {
                flex:1 auto;
            }   
        }
        /*寬度大于800時,邊欄1在上面*/
        @media all and (min-width: 600px) {
            aside.class_aside_left {
                order:1;
            }
            article.class_article {
                order:2;
            }
            aside.class_aside_right {
                order:3;
            }
            footer.class_footer {
                order:4;
            }
            /*這個是啥意思呀? 橫向的權重是:1  3  1*/
            article.class_article {
                flex:3 0px;
            }
        }
    </style>  
</head>  
  
<body>  
    <div class="class_div_flexcontainer">
        <header style="background-color:#fee;" class="class_header">
            <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
            </h1>
        </header>
        <article style="background-color:#efe;" class="class_article">
            <p style="color:black;">
                在我們走過的季節裡，路旁盛開的花朵也在不斷變化，那個季節盛開的花是叫什麼來着？輕輕搖曳着，一碰會微微刺痛，靠近一聞，隐約有股青澀的陽光的氣息。那氣息漸漸地淡去，我們也在慢慢長大。可是，那朵花一定還在某個地方盛開着……對，我們永遠都會繼續實作那朵花的願望。
            </p>
        </article>

        <aside style="background-color:#4CAF50;color:white;" class="class_aside class_aside_left"
        >左邊欄1</aside>
        <aside style="background-color:#008CBA;color:white;" class="class_aside class_aside_right">右邊欄2</aside>

        <footer class="class_footer" id="copyright" style="background-color:#eef;">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

使用彈性盒子建立響應式頁面

CSS3 彈性盒子屬性

下表列出了在彈性盒子中常用到的屬性:

屬性 描述
display 指定 HTML 元素盒子類型。
flex-direction 指定了彈性容器中子元素的排列方式
justify-content 設定彈性盒子元素在主軸（橫軸）方向上的對齊方式。
align-items 設定彈性盒子元素在側軸（縱軸）方向上的對齊方式。
flex-wrap 設定彈性盒子的子元素超出父容器時是否換行。
align-content 修改 flex-wrap 屬性的行為，類似align-items, 但不是設定子元素對齊，而是設定行對齊
flex-flow flex-direction 和 flex-wrap 的簡寫屬性
order 設定彈性盒子的子元素排列順序,小的在前(可負)。
align-self 在彈性子元素上使用。覆寫容器的 align-items 屬性。
flex 設定彈性盒子的子元素如何配置設定空間(權重)。

CSS3 多媒體查詢

CSS2 多媒體類型

@media

 規則在 CSS2 中有介紹，針對不同媒體類型可以定制不同的樣式規則。

例如：你可以針對不同的媒體類型(包括顯示器、便攜裝置、電視機、平闆等等)設定不同的樣式規則。

但是CSS2的這些多媒體類型在很多裝置上支援還不夠友好。這就需要我們掌握CSS3中優秀的多媒體查詢了

CSS3 多媒體查詢

CSS3 的多媒體查詢 繼承了 CSS2 多媒體類型的所有思想： 取代了查找裝置的類型，CSS3 根據設定自适應顯示。

媒體查詢可用于檢測很多事情，例如：

  • viewport(視窗) 的寬度與高度
  • 裝置(device)的寬度與高度
  • 朝向 (智能手機橫屏，豎屏) 。
  • 分辨率

目前很多針對蘋果手機，Android 手機，平闆等裝置的H5頁面,都會使用到多媒體查詢。

浏覽器支援

表格中的數字表示支援該屬性的第一個浏覽器的版本号。

屬性 Chrome IE Firefox Safari Opera
@media 21.0 9.0 3.5 4.0 9.0

多媒體查詢文法

多媒體查詢由多種媒體組成，可以包含一個或多個表達式，表達式根據條件是否成立傳回 true 或 false。

@media and|not|only mediatype and (expressions) {
    CSS-Code;
}

如果指定的多媒體類型比對裝置類型則查詢結果傳回 true，文檔會在比對的裝置上顯示與之對應的指定的樣式效果。

除非你使用了 not 或 only 操作符，否則所有的樣式會适應在所有裝置上顯示效果。

  • not: not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）。
  • only: 用來定某種特别的媒體類型。對于支援Media Queries的移動裝置來說，如果存在only關鍵字，移動裝置的Web浏覽器會忽略only關鍵字并直接根據後面的表達式應用樣式檔案。對于不支援Media Queries的裝置但能夠讀取Media Type類型的Web浏覽器，遇到only關鍵字時會忽略這個樣式檔案。
  • all: 所有裝置。

你也可以在不同的媒體上使用不同的樣式檔案：

CSS3 多媒體類型

值 描述
all 用于所有多媒體類型裝置
print 用于列印機
screen 用于電腦螢幕，平闆，智能手機等。
speech 用于螢幕閱讀器

多媒體查詢簡單執行個體

使用多媒體查詢可以在指定的裝置上使用對應的樣式替代原有的樣式。

以下執行個體中在螢幕可視視窗尺寸大于 480 像素的裝置上修改背景顔色:

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        /*預設的背景顔色*/
        body {
            background-color: pink;
        }
        /*當螢幕大于480時,顯示淡綠色*/
        @media screen and (min-width: 480px) {
            body {
                background-color: lightgreen;
            }
        }
    </style>  
</head>  
  
<body>  
        <header>
            <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
        未聞花名
            </h1>
        </header>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>當視窗大于480px時,顯示淡綠色
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:(大于480的螢幕顯示淡淡的綠色喔~)

@media screen and (min-width: 480px) {

    body {

        background-color:  lightgreen;

    }

}

以下執行個體在螢幕可視視窗尺寸大于 480 像素時将菜單浮動到頁面左側：

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        div#id_div_content {
            margin-left: 4px;
        }
        ul#id_ul_menulist {
            margin: 0;
            padding: 0;
        }
        li.class_li_item {
            background: #CDF0F6;
            border:1px solid #d4d4d4;
            border-radius: 4px;
            list-style-type: none;
            margin: 4px;
            padding: 2px;
        }
        /*核心代碼*/
        @media screen and (min-width: 490px) {
            div#id_div_siderbar {
                /*大于490的視窗上,左浮動*/
                float: left;
                width: 100px;
            }
            div#id_div_content {
                margin-left: 104px;
            }
        }
    </style>  
</head>  
  
<body>  
        <div class="class_div_container">
            <div id="id_div_siderbar">
                <ul id="id_ul_menulist">
                    <li class="class_li_item">那朵花</li>
                    <li class="class_li_item">龍與虎</li>
                    <li class="class_li_item">石頭門</li>
                    <li class="class_li_item">輕音少女</li>
                    <li class="class_li_item">來自深淵</li>
                </ul>
            </div>
        
            <div id="id_div_content">
                <h2 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
                    未聞花名
                </h2>
                <p>
                    在我們走過的季節裡，路旁盛開的花朵也在不斷變化，那個季節盛開的花是叫什麼來着？輕輕搖曳着，一碰會微微刺痛，靠近一聞，隐約有股青澀的陽光的氣息。那氣息漸漸地淡去，我們也在慢慢長大。可是，那朵花一定還在某個地方盛開着……對，我們永遠都會繼續實作那朵花的願望。
                </p>
            </div>
        </div>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>當視窗大于490px時,欄目清單将float至left
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

@media screen and (min-width: 480px) {

    #leftsidebar { width:  200px;  float:  left;}

    #main { margin-left: 216px;}

}

CSS3 @media 參考

更多多媒體查詢内容可以參考@media 規則。

CSS3 多媒體查詢執行個體

本章節我們将為大家示範一些多媒體查詢執行個體。

開始之前我們先制作一個電子郵箱的連結清單。

HTML 代碼如下：

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="中國成人教育網-免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT,JQUERY,XML,JSON,C,C++,C#,OC,PHP,JAVA,JSP,PYTHON,RUBY,PERL,LUA,SQL,LINUX,SHELL,彙編,日語,英語,泰語,韓語,俄語,粵語,阿語,魔方,樂理,動漫,PR,PS,AI,AE">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        ul {
            list-style-type: none;
        }
        ul li a {
            text-decoration: none;
            color: green;
            padding: 3px;
            /*核心代碼*/
            display: block;
        }
    </style>  
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未聞花名
        </h1>
        <ul>
            <li><a>面碼</a></li>
            <li><a>逢坂大河</a></li>
            <li><a>輕音少女</a></li>
        </ul>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>調節視窗大小檢視變化
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

注意 

data-email

 屬性。

在 HTML 中我們可以使用帶 

data-

 字首的屬性來存儲資訊。

520 到 699px 寬度 - 添加郵箱圖示

當浏覽器的寬度在 520 到 699px, 郵箱連結前添加郵件圖示：

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        ul {
            list-style-type: none;
        }
        ul li a {
            text-decoration: none;
            color: green;
            padding: 3px;
            /*核心代碼*/
            display: block;
        }
        /*核心代碼:視窗大小在520~699時*/
        @media screen and (min-width: 520px) and (max-width: 699px) {
            ul li a {
                /*先騰出左邊的空間*/
                padding-left: 30px;
                background: url(e-mail26.png) left center no-repeat;
            }
        }
    </style>  
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未聞花名
        </h1>
        <ul>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >面碼</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >逢坂大河</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >輕音少女</a></li>
        </ul>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>調節視窗大小檢視變化<br/>
            注意a标簽上面的data-email屬性,後面要用到
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

@media screen and (max-width: 699px) and (min-width: 520px) {

    ul li a {

         padding-left:  30px;

         background:  url(email-icon.png) left center no-repeat;

    }

}

700 到 1000px - 添加文本字首資訊

當浏覽器的寬度在 700 到 1000px, 會在郵箱連結前添加 "Email: ":

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        ul {
            list-style-type: none;
        }
        ul li a {
            text-decoration: none;
            color: green;
            padding: 3px;
            /*核心代碼*/
            display: block;
        }
        /*核心代碼:視窗大小在520~699時*/
        @media screen and (min-width: 520px) and (max-width: 699px) {
            ul li a {
                /*先騰出左邊的空間*/
                padding-left: 30px;
                background: url(e-mail26.png) left center no-repeat;
            }
        }
        /*核心代碼:視窗大小在700~1000時*/
        @media screen and (min-width: 700px) and (max-width: 1000px) {
            ul li a:before {
                /*添加字首*/
                content:"Email: ";
                font-style: italic;
                color: #666;
            }
        }
        
    </style>  
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未聞花名
        </h1>
        <ul>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >面碼</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >逢坂大河</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >輕音少女</a></li>
        </ul>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>調節視窗大小檢視變化<br/>
            注意a标簽上面的data-email屬性,後面要用到
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

@media screen and (max-width: 1000px) and (min-width: 700px) {

    ul li a:before {

         content:  "Email: ";

         font-style:  italic;

         color:  #666666;

    }

}

大于 1001px 寬度 - 添加郵件位址

當浏覽器的寬度大于 1001px 時，會在連結後添加郵件位址接。

我們會使用 

data-

 屬性來為每個人名後添加郵件位址： (一個字:秀!)

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        ul {
            list-style-type: none;
        }
        ul li a {
            text-decoration: none;
            color: green;
            padding: 3px;
            /*核心代碼*/
            display: block;
        }
        /*核心代碼:視窗大小在520~699時*/
        @media screen and (min-width: 520px) and (max-width: 699px) {
            ul li a {
                /*先騰出左邊的空間*/
                padding-left: 30px;
                background: url(e-mail26.png) left center no-repeat;
            }
        }
        /*核心代碼:視窗大小在700~1000時*/
        @media screen and (min-width: 700px) and (max-width: 1000px) {
            ul li a:before {
                /*添加字首*/
                content:"Email: ";
                font-style: italic;
                color: #666;
            }
        }
        /*核心代碼:視窗大小在1000以上時,将data-email自定義屬性中的值取出來*/
        @media screen and (min-width: 1000px) {
            ul li a:after {
                /*取出自定義屬性中的值*/
                content:"(" attr(data-email) ")";
                font-style: italic;
                font-size: 12px;
                color: #666;
            }
        }
    </style>  
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未聞花名
        </h1>
        <ul>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >面碼</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >逢坂大河</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >輕音少女</a></li>
        </ul>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>調節視窗大小檢視變化<br/>
            注意a标簽上面的data-email屬性,後面要用到
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

@media screen and (min-width: 1001px) {

    ul li a:after {

         content:  " (" attr(data-email) ")";

         font-size:  12px;

         font-style:  italic;

         color:  #666666;

    }

}

大于 1151px 寬度 - 添加圖示

當浏覽器的寬度大于 1001px 時，會在人名前添加圖示。

執行個體中，我們沒有編寫額外的查詢塊，我們可以在已有的查詢媒體後使用逗号分隔來添加其他媒體查詢 (類似 OR 操作符):

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        ul {
            list-style-type: none;
        }
        ul li a {
            text-decoration: none;
            color: green;
            padding: 3px;
            /*核心代碼*/
            display: block;
        }
        
        /*核心代碼:視窗大小在700~1000時*/
        @media screen and (min-width: 700px) and (max-width: 1000px) {
            ul li a:before {
                /*添加字首*/
                content:"Email: ";
                font-style: italic;
                color: #666;
            }
        }
        /*核心代碼:視窗大小在1000以上時,将data-email自定義屬性中的值取出來*/
        @media screen and (min-width: 1000px) {
            ul li a:after {
                /*取出自定義屬性中的值*/
                content:"(" attr(data-email) ")";
                font-style: italic;
                font-size: 12px;
                color: #666;
            }
        }

        /*核心代碼:視窗大小在520~699時
        或者大于1151時*/
        @media screen and (min-width: 520px) and (max-width: 699px),(min-width: 1151px){
            ul li a {
                /*先騰出左邊的空間*/
                padding-left: 30px;
                background: url(e-mail26.png) left center no-repeat;
            }
        }
    </style>  
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未聞花名
        </h1>
        <ul>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >面碼</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >逢坂大河</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >輕音少女</a></li>
        </ul>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>調節視窗大小檢視變化<br/>
            注意a标簽上面的data-email屬性,後面要用到
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

核心代碼:

@media screen and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {

    ul li a {

         padding-left:  30px;

         background:  url(email-icon.png) left center no-repeat;

    }

} 更多執行個體

在一個網頁的側欄上使用郵件清單連結

該執行個體在網頁的左側欄添加了郵件連結清單。

代碼如下:

<!DOCTPYE html>  
<html >  
<head>  
    <link rel="icon" href="beyond.jpg" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  type="image/x-icon"/>
    <meta charset="UTF-8">
    <meta name="author" content="beyond">
    <meta http-equiv="refresh" content="520">
    <meta name="description" content="免費零基礎教程">
    <meta name="viewport" content="width=device-width, 
    initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
    <meta name="keywords" content="HTML,CSS,JAVASCRIPT">
    <title>beyondの心中の動漫神作</title>
    <link rel="stylesheet" type="text/css" href="beyondbasestylewhite3.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >

    <!--[if lt IE 9]>
        <script src="//apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
  
    <style type="text/css">  
        body{  
            font-size: 100%;  
            /*background-image: url("sakura4.png");  
            background-repeat: no-repeat;  
            background-position: center center;  */
            /*聲明margin和padding是個好習慣*/  
            margin: 0;  
            padding: 0; 
        }
        ul#id_ul {
            list-style-type: none;
        }
        ul#id_ul li a {
            text-decoration: none;
            color: green;
            padding: 3px;
            /*核心代碼*/
            display: block;
        }
        ul#id_ul {
            width: 25%;
            float: left;
        }
        
        /*核心代碼:視窗大小在700~1000時*/
        @media screen and (min-width: 700px) and (max-width: 1000px) {
            ul#id_ul li a:before {
                /*添加字首*/
                content:"Email: ";
                font-style: italic;
                color: #666;
            }
        }
        /*核心代碼:視窗大小在1000以上時,将data-email自定義屬性中的值取出來*/
        @media screen and (min-width: 1000px) {
            ul#id_ul li a:after {
                /*取出自定義屬性中的值*/
                content:"(" attr(data-email) ")";
                font-style: italic;
                font-size: 12px;
                color: #666;
            }
        }

        /*核心代碼:視窗大小在520~699時
        或者大于1151時*/
        @media screen and (min-width: 520px) and (max-width: 699px),(min-width: 1151px){
            ul#id_ul li a {
                /*先騰出左邊的空間*/
                padding-left: 30px;
                background: url(e-mail26.png) left center no-repeat;
            }
        }
    </style>  
</head>  
  
<body>  
        <h1 style="color:white;text-shadow:2px 2px 4px #000;letter-spacing:5px;" class="sgcontentcolor sgcenter">  
            未聞花名
        </h1>
        <ul id="id_ul">
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >面碼</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >逢坂大河</a></li>
            <li><a data-email="[email protected]" href="mailto:[email protected]" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >輕音少女</a></li>
        </ul>
        <div id="id_div_main">
            <p>
                在我們走過的季節裡，路旁盛開的花朵也在不斷變化，那個季節盛開的花是叫什麼來着？輕輕搖曳着，一碰會微微刺痛，靠近一聞，隐約有股青澀的陽光的氣息。那氣息漸漸地淡去，我們也在慢慢長大。可是，那朵花一定還在某個地方盛開着……對，我們永遠都會繼續實作那朵花的願望。
            </p>
        </div>
        <p class="sgcontentcolor sgcenter" style="clear:left;">
            <b>注意:</b>調節視窗大小檢視變化<br/>
            注意a标簽上面的data-email屬性,後面要用到
        </p>
        <footer id="copyright">
            <p style="font-size:14px;text-align:center;font-style:italic;">  
            Copyright © <a id="author">2018</a> Powered by <a id="author">beyond</a>  
            </p>        
        </footer>
    </div>
</body>  
</html>

效果如下:

CSS3_04_彈性盒子_多媒體

未完待續,下一章節,つづく

CSS3_04_彈性盒子_多媒體
CSS/CSS3 css3 彈性盒子 多媒體
上一篇: springboot+springcloud API網關接口安全相關-------R
下一篇: leetCode之Two Sum python實作1. Two Sum

繼續閱讀