3 4 "/> 3 4 ">

Home  >  Article  >  Web Front-end  >  Graphic and text examples of CSS3 flexible box layout

Graphic and text examples of CSS3 flexible box layout

零下一度
零下一度Original
2017-06-29 11:26:402260browse
  1. Using the adaptive window flexible box layout

    can make the total width of the div equal to the browser width, and can change as the browser changes.

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     <title>测试</title> 8     <style> 9     /*弹性盒布局*/10     #container{11         display: -webkit-box;12         display: -moz-box;13     }14     #left-sidebar{15         width: 200px;16         padding: 20px;17         background-color: orange;18     }19     #content{20         -moz-box-flex: 1;21         -webkit-box-flex: 1;22         padding: 20px;23         background-color: yellow;24     }25     #right-sidebar{26         width: 200px;27         padding: 20px;28         background-color: limegreen;29     }30     #left-sidebar, #content, #right-sidebar{31         box-sizing: border-box;32     }33 </style>34 </head>35 <body>36 <div id="container">37     <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>38     <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>39     <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>40 </div>41 </body>42 </html>
  2. Change the display order of elements

    box-ordinal-group can change the display order of each element.

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     <title>测试</title> 8     <style> 9     /*弹性盒布局*/10     #container{11         display: -webkit-box;12         display: -moz-box;13     }14     #left-sidebar{15         -moz-box-ordinal-group: 2;16         -webkit-box-ordinal-group: 2;17         width: 200px;18         padding: 20px;19         background-color: orange;20     }21     #content{22         -moz-box-ordinal-group: 1;23         -webkit-box-ordinal-group: 1;24         -moz-box-flex: 1;25         -webkit-box-flex: 1;26         padding: 20px;27         background-color: yellow;28     }29     #right-sidebar{30         -moz-box-ordinal-group: 3;31         -webkit-box-ordinal-group: 3;32         width: 200px;33         padding: 20px;34         background-color: limegreen;35     }36     #left-sidebar, #content, #right-sidebar{37         box-sizing: border-box;38     }39 </style>40 </head>41 <body>42 <div id="container">43     <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>44     <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>45     <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>46 </div>47 </body>48 </html>
  3. Change the arrangement direction of elements

    Use box-orient to change the arrangement direction of multiple elements.

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     <title>测试</title> 8     <style> 9     /*弹性盒布局*/10     #container{11         display: -webkit-box;12         display: -moz-box;13         -moz-box-orient: vertical;14         -webkit-box-orient: vertical;15     }16     #left-sidebar{17         -moz-box-ordinal-group: 2;18         -webkit-box-ordinal-group: 2;19         width: 200px;20         padding: 20px;21         background-color: orange;22     }23     #content{24         -moz-box-ordinal-group: 1;25         -webkit-box-ordinal-group: 1;26         -moz-box-flex: 1;27         -webkit-box-flex: 1;28         padding: 20px;29         background-color: yellow;30     }31     #right-sidebar{32         -moz-box-ordinal-group: 3;33         -webkit-box-ordinal-group: 3;34         width: 200px;35         padding: 20px;36         background-color: limegreen;37     }38     #left-sidebar, #content, #right-sidebar{39         box-sizing: border-box;40     }41 </style>42 </head>43 <body>44 <div id="container">45     <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>46     <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>47     <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>48 </div>49 </body>50 </html>
  4. Adaptation of element width and height

    Although when using box layout, the height and width of elements have It has a certain degree of adaptability, but there will always be a large blank area left in the container.

  5. Use flexible box layout to eliminate white space

    Using flexible box layout can eliminate the remaining white space problem of box layout.

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     <title>测试</title> 8     <style> 9     *{10         box-sizing: border-box;11         margin: 0;12     }13     html, body{14         width: 100%;15         height: 100%;16     }17     /*弹性盒布局*/18     #container{19         display: -webkit-box;20         display: -moz-box;21         -moz-box-orient: vertical;22         -webkit-box-orient: vertical;23         border: 2px solid black;24         width: 100%;25         height: 100%;26     }27     #left-sidebar{28         -moz-box-ordinal-group: 2;29         -webkit-box-ordinal-group: 2;30         width: 200px;31         padding: 20px;32         background-color: orange;33     }34     #content{35         -moz-box-ordinal-group: 1;36         -webkit-box-ordinal-group: 1;37         -moz-box-flex: 1;38         -webkit-box-flex: 1;39         padding: 20px;40         background-color: yellow;41     }42     #right-sidebar{43         -moz-box-ordinal-group: 3;44         -webkit-box-ordinal-group: 3;45         width: 200px;46         padding: 20px;47         background-color: limegreen;48     }49 </style>50 </head>51 <body>52 <div id="container">53     <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>54     <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>55     <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>56 </div>57 </body>58 </html>
  6. Use box-flex attribute on multiple elements

    If every div element has box-flex , then the width and height of each element is equal to 1/n of the width and height of the container. The empty space of the container is allocated according to the box-flex property value.


    Sample code:

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     <title>测试</title> 8     <style> 9     *{10         box-sizing: border-box;11         margin: 0;12     }13     html, body{14         width: 100%;15         height: 100%;16     }17     /*弹性盒布局*/18     #container{19         display: -webkit-box;20         display: -moz-box;21         -moz-box-orient: vertical;22         -webkit-box-orient: vertical;23         border: 2px solid black;24         width: 100%;25         height: 100%;26     }27     #left-sidebar{28         -moz-box-ordinal-group: 2;29         -webkit-box-ordinal-group: 2;30         -moz-box-flex: 1;31         -webkit-box-flex: 1;32         padding: 20px;33         background-color: orange;34     }35     #content{36         -moz-box-ordinal-group: 1;37         -webkit-box-ordinal-group: 1;38         -moz-box-flex: 2;39         -webkit-box-flex: 2;40         padding: 20px;41         background-color: yellow;42     }43     #right-sidebar{44         -moz-box-ordinal-group: 3;45         -webkit-box-ordinal-group: 3;46         -moz-box-flex: 1;47         -webkit-box-flex: 1;48         padding: 20px;49         background-color: limegreen;50     }51 </style>52 </head>53 <body>54 <div id="container">55     <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>56     <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>57     <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>58 </div>59 </body>60 </html>
  7. ##Specify the horizontal and vertical alignment

    You can use the box-pack attribute and the box-align attribute to specify the horizontal or vertical alignment of text and images in the element.


    Sample code:

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4     <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5     <meta http-equiv="x-ua-compatible" content="IE=edge"> 6     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7     <title>测试</title> 8     <style> 9     *{10         box-sizing: border-box;11         margin: 0;12     }13     html, body{14         width: 100%;15         height: 100%;16     }17     /*弹性盒布局*/18     #container{19         display: -webkit-box;20         display: -moz-box;21         -moz-box-align: center;22         -webkit-box-align: center;23         -moz-box-pack: center;24         -webkit-box-pack: center;25         -moz-box-orient: vertical;26         -webkit-box-orient: vertical;27         border: 2px solid black;28         width: 50%;29         height: 50%;30     }31     #content{32         display: -webkit-box;33         display: -moz-box;34         -moz-box-align: center;35         -webkit-box-align: center;36         -moz-box-pack: center;37         -webkit-box-pack: center;38         -moz-box-orient: vertical;39         -webkit-box-orient: vertical;40         width: 50%;41         height: 50%;42         padding: 20px;43         background-color: yellow;44     }45 </style>46 </head>47 <body>48 <div id="container">49     <div id="content">示例文字。</div>50 </div>51 </body>52 </html>

The above is the detailed content of Graphic and text examples of CSS3 flexible box layout. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn