Graphic and text examples of CSS3 flexible box layout-HTML Tutorial-php.cn

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>

Copy after login

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>

Copy after login

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>

Copy after login

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.

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>

Copy after login

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>

Copy after login

##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>

Copy after login

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!