案例1：
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>弹性盒子模型的应用</title> <style type="text/css"> @charset "utf-8"; * {margin: 0; border: 0; padding: 0;} body, html {-webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; overflow-x: hidden;font-family:"微软雅黑";} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;} footer, header, section {position: relative;} ol, ul {list-style: none;} button, input, textarea {border: 0; margin: 0; padding: 0; font-size: 1em; line-height: 1em; background-color: transparent;} a {color: #1a1a1a;} a:active, a:hover {outline: 0;} a, a:visited {text-decoration: none;} li {list-style:none;} </style> </head> <body> <!--弹性盒子模型的使用--> <div class="betweens"> <div>正在热映</div> <div>更多></div> </div> <style type="text/css"> .betweens{ padding:15px 10px 11px; display:flex; flex-direction:row; justify-content:space-between;/*内部元素居两边显示*/ /*justify-content:space-around;*/ /*使内部元素平均分配在里面*/ /*justify-content:flex-start;*/ /*默认值。项目位于容器的开头。*/ /*justify-content:flex-end;*/ /*项目位于容器的结尾。*/ /*justify-content:center; */ /*项目位于容器的中心。*/ /*justify-content:initial;*/ /*设置该属性为它的默认值。跟flex-start效果一致*/ /*justify-content:inherit;*/ /*从父元素继承该属性。*/ } </style> </body> </html>
案例2：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <style type="text/css"> @charset "utf-8"; * {margin: 0; border: 0; padding: 0;} body, html {-webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; overflow-x: hidden;font-family:"微软雅黑";} h1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal;} footer, header, section {position: relative;} ol, ul {list-style: none;} button, input, textarea {border: 0; margin: 0; padding: 0; font-size: 1em; line-height: 1em; background-color: transparent;} a {color: #1a1a1a;} a:active, a:hover {outline: 0;} a, a:visited {text-decoration: none;} li {list-style:none;} </style> </head> <body> <div class="movie-list-container"> <div class="inner-container"> <div class="movie-head"> <text class="slogan">正在热映</text> <div class="more"> <text class="more-text">更多></text> </div> </div> <ul class="movies-container"> <li><div class="movie-img"></div><text class="movie-title">你的名字</text><span class="starsTemplate"></span></li> <li><div class="movie-img"></div><text class="movie-title">你的名字</text><span class="starsTemplate"></span></li> <li><div class="movie-img"></div><text class="movie-title">你的名字</text><span class="starsTemplate"></span></li> </div> </div> </div> <style type="text/css"> .movie-list-container{ background-color: #fff; display: flex; flex-direction: column; } .inner-container{ margin: 0 auto 10px; } .movie-head{ padding: 15px 10px 11px; display: flex; flex-direction: row; justify-content: space-between; } .movie-img{ width: 100px; height: 135px; padding-bottom: 10rpx; background-color:#188eee; } .movie-title{ margin-bottom: 12px; font-size: 14px; } .starsTemplate{ display:block; width:80px; height:20px; background-color:#F0F; } .movies-container{ display: flex; flex-direction: row; } .movies-container li{ display: flex; flex-direction: column; padding: 0 11px; } </style> </body> </html>