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

搜索
博主信息
博文 11
粉絲 0
評論 0
訪問量 12281
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
FLEX屬性總結(jié)，練習(xí)--PHP培訓(xùn)十期線上班
宋明杰
原創(chuàng)
854人瀏覽過

1，F(xiàn)lex布局是什么？

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局

  1. .box{
  2.     display:flex;
  3. }

行內(nèi)元素也可以使用Flex布局。

  1. .box{
  2.     display:inline-flex;
  3. }

Webkit內(nèi)核的瀏覽器(safari)，必須加上-webkit前綴。

  1. .box{
  2.     display: -webkit-flex;
  3.     display: flex;
  4. }

2，基本慨念

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動(dòng)成為容器成員，稱為Flex項(xiàng)目（flex item），簡稱”項(xiàng)目”。

3，容器的屬性

--flex-direction:

  1. row:（默認(rèn)）主軸為水平方向，起點(diǎn)在左端
  2. row-reverse：主軸為水平方向，起點(diǎn)在右端。
  3. column：主軸為垂直方向，起點(diǎn)在上方。
  4. columu-reverse：主軸為垂直方向，起點(diǎn)在下方。

運(yùn)行實(shí)例：

  1.  <style>
  2.         .box{
  3.             width: 800px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  12.             flex-direction: row;
  13.         }
  14.         p{
  15.             width: 160px;
  16.             height: 80px;
  17.             background-color: aqua;
  18.             border-style:dashed ;
  19.             font-size:25px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="box">
  26.         <p>1</p>
  27.         <p>2</p>
  28.         <p>3</p>

  1. <style>
  2.         .box{
  3.             width: 800px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  11.             flex-direction: row-reverse;
  12.         }
  13.         p{
  14.             width: 160px;
  15.             height: 80px;
  16.             background-color: aqua;
  17.             border-style:dashed ;
  18.             font-size:25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <p>1</p>
  26.         <p>2</p>
  27.         <p>3</p>
  28.     </div>

  1.     <style>
  2.         .box{
  3.             width: 800px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  11.             flex-direction: column;
  12.         }
  13.         p{
  14.             width: 160px;
  15.             height: 80px;
  16.             background-color: aqua;
  17.             border-style:dashed ;
  18.             font-size:25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <p>1</p>
  26.         <p>2</p>
  27.         <p>3</p>
  28.     </div>
  29. </body>

  1.     <style>
  2.         .box{
  3.             width: 800px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  11.             flex-direction: column-reverse;
  12.         }
  13.         p{
  14.             width: 160px;
  15.             height: 80px;
  16.             background-color: aqua;
  17.             border-style:dashed ;
  18.             font-size:25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <p>1</p>
  26.         <p>2</p>
  27.         <p>3</p>
  28.     </div>
  29. </body>

  1. <style>
  2.         .box{
  3.             width: 800px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  11.             flex-wrap:nowrap;
  12.         }
  13.         p{
  14.             width: 160px;
  15.             height: 80px;
  16.             background-color: aqua;
  17.             border-style:dashed ;
  18.             font-size:25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <p>1</p>
  26.         <p>2</p>
  27.         <p>3</p>
  28.         <p>4</p>
  29.         <p>5</p>
  30.         <p>6</p>
  31.         <p>7</p>
  32.         <p>8</p>
  33.         <p>9</p>
  34.     </div>
  35. </body>

  1.     <style>
  2.         .box{
  3.             width: 850px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  11.             flex-wrap:wrap;
  12.         }
  13.         p{
  14.             width: 160px;
  15.             height: 80px;
  16.             background-color: aqua;
  17.             border-style:dashed ;
  18.             font-size:25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <p>1</p>
  26.         <p>2</p>
  27.         <p>3</p>
  28.         <p>4</p>
  29.         <p>5</p>
  30.         <p>6</p>
  31.         <p>7</p>
  32.         <p>8</p>
  33.         <p>9</p>
  34.     </div>
  35. </body>

  1. <style>
  2.         .box{
  3.             width: 850px;
  4.             height: 300px;
  5.             background-color: antiquewhite;
  6.             border-style:solid;
  7.             margin:auto;
  8.             display: flex;
  9.             /*適配 safari 瀏覽器*/
  10.             display: -webkit-flex;
  11.             flex-wrap:wrap-reverse;
  12.         }
  13.         p{
  14.             width: 160px;
  15.             height: 80px;
  16.             background-color: aqua;
  17.             border-style:dashed ;
  18.             font-size:25px;
  20.         }
  21.     </style>
  22. </head>
  23. <body>
  24.     <div class="box">
  25.         <p>1</p>
  26.         <p>2</p>
  27.         <p>3</p>
  28.         <p>4</p>
  29.         <p>5</p>
  30.         <p>6</p>
  31.         <p>7</p>
  32.         <p>8</p>
  33.         <p>9</p>
  34.     </div>
  35. </body>

justify-content屬性

align-items屬性

align-content屬性

該屬性定義了多根軸線的對齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用

flex-start：與交叉軸的起點(diǎn)對齊。
flex-end：與交叉軸的終點(diǎn)對齊。
center：與交叉軸的中點(diǎn)對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。

手寫屬性：

批改老師：天蓬老師天蓬老師

批改狀態(tài)：合格

老師批語：你的手寫部分, 猶如印刷體, 人肉打字機(jī)呀, 作業(yè)完成的相當(dāng)棒, 超出預(yù)期
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報(bào)處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)