案例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. Python开发【Django】：模板语言

    排序 1.forloop.counter 表示循环的次数,它从1开始计数,第一次循环设为1 {% for item in todo_list %} <p>{{ forloop.counte ...

  2. iOS定位原理和使用建议（转）

    原文:http://ibbs.91.com/thread-1548870-1-1.html 看到很多网友讨论iOS设备定位的问题,这里将我们所了解的关于iPhone.iPad.iPod等的定位原理做详 ...

  3. android的selector选择器

    1. drawable/actionbar_compat_item.xml 2.drawable/actionbar_compat_item_pressed.xml 3.drawable/action ...

  4. centos shell脚本编程2 if 判断 case判断 shell脚本中的循环 for while shell中的函数 break continue test 命令 第三十六节课

    centos  shell脚本编程2 if 判断  case判断   shell脚本中的循环  for   while   shell中的函数  break  continue  test 命令   ...

  5. MySQL 的mysqldump备份

    MySQL 的mysqldump备份 来自<mysql技术内幕 innodb存储引擎> --single-transaction:只对innodb表有效 --lock-tables:对My ...

  6. python基础之员工信息表作业

    周末大礼包 文件存储格式如下: id, name, age, phone, job 1, Alex, 22, 13651054608, IT 2, Egon, 23, 13304320533, Tea ...

  7. Flume+Morphlines实现数据的实时ETL

    转载:http://mp.weixin.qq.com/s/xCSdkQo1XMQwU91lch29Uw Apache Flume介绍: Apache Flume是一个Apache的开源项目,是一个分布 ...

  8. [py]django重置密码

    django的admin用户被我多动症一样的测试,给密码弄丢了,需要重置. 从数据库重置的可能性为0,因为django对于密码有保护策略.考虑从运行程序的地方进行重置: 1.在程序的文件夹下,执行这样 ...

  9. 知识点1-树状数组[带poj Stars作为巩固]

    转自:https://blog.csdn.net/flushhip/article/details/79165701#commentBox 1.首先其中讲到了一个问题,就是如何求一个数的二进制表示的最 ...

  10. （2）Mac环境搭建

    创建HelloWorld项目 将刚才下载的压缩包解压到你指定的文件夹里. 进入到目录cocos2d-x-3.2alpha0/tools/cocos2d-console/bin/cocos.py 打开终 ...