案例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. 前端程序员：月薪 5K 到 5 万

    入行行头:5 大硬件 请准备好以下东西 一颗人类的大脑:智商在平均水平线以上即可 一份强烈的渴望:我的代码要可以运行在任何一个有浏览器的设备上. 一台笔记本电脑:不需要花费很多钱得那种,只要它可以运行 ...

  2. 转载：Why using Single Root I/O Virtualization (SR-IOV) can help improve I/O performance and Reduce Costs

    Introduction While server virtualization is being widely deployed in an effort to reduce costs and o ...

  3. centos7 python3 安装

    mkdir /usr/python3.5 tar -xf Python-3.5.1.tgz cd Python-3.5.1 ./configure --prefix=/usr/python3.5 ma ...

  4. iOS邮箱、手机号等常用验证功能 判断字符串是否int float

    手机号验证 /* 手机号码 13[0-9],14[5|7|9],15[0-3],15[5-9],17[0|1|3|5|6|8],18[0-9] 移动:134[0-8],13[5-9],147,15[0 ...

  5. 【spring mvc】application context中【bean】的生命周期

    生命周期过程 主要分为四部分: 一.实例化 1. 当调用者通过 getBean( name )向 容器寻找Bean 时,如果容器注册了org.springframework.beans.factory ...

  6. Linux下编译安装PHP扩展redis

    [Redis] 先安装tcl: yum install tcl [下载和安装] 官网http://redis.io/  下载最新的稳定版本,这里是3.2.0, 然后解压文件并进入. $ sudo ta ...

  7. MonkeyScript使用教程

    原文地址https://www.cnblogs.com/yizhou-xu/p/8072813.html 原文地址https://www.cnblogs.com/YatHo/p/7205162.htm ...

  8. 非线性方程(组)：一维非线性方程（一）二分法、不动点迭代、牛顿法 [MATLAB]

    1. 二分法(Bisection) 1) 原理 [介值定理] 对于连续的一元非线性函数,若其在两个点的取值异号,则在两点间必定存在零点. [迭代流程] 若左右两端取值不同,则取其中点,求其函数值,取中 ...

  9. 4gcc编译器

    gcc编译器(GNU C Compiler) 现在我们所说的 gcc 是 GUN Compiler Collection的缩写,可以支持多种语言编译,比如 C,C++,Java, pascal 等 g ...

  10. EditPlus 4.3.2475 中文版已经发布（10月28日更新）

    新的修订版修复了上移多个插入点时会造成程序崩溃的问题.