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

css中的f弹性盒子模型的应用案例的更多相关文章

  1. CSS学习篇核心之——盒子模型

    概述 关于CSS的一些基础知识我们在前面文章中已经有所了解,这篇文章我们主要来学习下CSS中的核心知识盒子模型的知识. 盒子模型 元素框的最内部分是实际的内容(element),直接包围内容的是内边距 ...

  2. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  3. CSS box-flex属性，然后弹性盒子模型简介

    今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

  4. CSS box-flex属性，然后弹性盒子模型简介(转)

    一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

  5. CSS Flexbox 弹性盒子模型

    CSS Flexbox 弹性盒子模型 设置元素样式为 display: flex 或 display: inline-flex, 让元素变成flex容器, 从而可以通过flex模式布局它的子元素. f ...

  6. CSS3中的弹性盒子模型

    介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

  7. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  8. flexbox弹性盒子模型

    这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

  9. css3弹性盒子模型之box-flex

    css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...

随机推荐

  1. Go Configure Support hot reloading.

    Go Configure – Josh Betz https://josh.blog/2017/04/go-configure Go Configure APRIL 27, 2017 # DEVELO ...

  2. iptables,lokkit,ebtables,arptables---logrotate

    iptables,lokkit,ebtables,arptables logrotate  这五个位置也被称为五个钩子函数(hook functions),也叫五个规则链. 1.PREROUTING ...

  3. android的一些类库的优缺点

    经过本人的面试经验,以及接触的android项目,总结了一下android的一些类库的优缺点: 一,线程方面 1.AsyncTask 首先是线程优化以及缺陷方面,针对目前大多数类库来说,都有好的设计方 ...

  4. Python开发【模块】：time、datatime

    时间模块 时间相关的操作,时间有三种表示方式: 时间戳               1970年1月1日之后的秒,即:time.time() 格式化的字符串    2014-11-11 11:11,   ...

  5. 小米范工具系列之六：小米范 web查找器2.x版本发布

    小米范web查找器是一款快速识别端口及服务的小工具. 此工具使用java 1.8以上版本运行. 下载地址:http://pan.baidu.com/s/1c1NDSVe  文件名web finder ...

  6. 给iphone配置qq邮箱

    在手机上使用qq邮箱发送和接受邮件,但是又不用qq邮箱,我用的是“网易邮箱大师” ,那么就需要配置服务. 1.在qq邮箱中设置邮箱,开启相关的服务,然后用手机发送短信来生成授权码.最后在手机上设置的密 ...

  7. link标签 rel="stylesheet"

    首先,link标签是用于当前文档引用外部文档的,其次,这个标签的rel属性用于设置对象和链接目的间的关系,说白了就是指明你链进来的对象是个什么东西的,具体的值及其所表示的关系如下:Alternate: ...

  8. 机器学习实战python3 Logistic Regression

    代码及数据:https://github.com/zle1992/MachineLearningInAction logistic regression 优点:计算代价不高,易于理解实现,线性模型的一 ...

  9. 20145201李子璇 《网络对抗》MSF基础应用

    实践报告 MS08_067漏洞渗透攻击 ms11_050漏洞攻击 Adobe漏洞攻击 辅助模块应用(auxiliary/scanner/portscan/tcp漏洞) MS08_067漏洞渗透攻击实践 ...

  10. g711u与g729比较编码格式

    •g711a—编解码格式为G.711 alaw •g711u—编解码格式为G.711 ulaw (the default) •g729—编解码格式为G.729 •g729a—编解码格式为G.729a ...