案例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>