案例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. 程序入口函数和glibc及C++全局构造和析构

    分类: CRT Machnasim 2011-06-15 17:45 144人阅读 评论(0) 收藏 举报 c++汇编linuxlist语言编译器 1,程序入口函数和初始化 操作系统在装载可执行文件后 ...

  2. proxy,https,git,tortoise git,ssh-agent,ssh-add,ssh,ssl,rsync

    看具体应用了,一般的文件复制使用scp,增量同步使用rsync.rsync的认证可以使用ssh,还可以是rsync自己的密码文件. ssh-keygen -l 察看 fineprint 5.1 通过p ...

  3. Redis缓冲区设置

    对于Redis服务器的输出(也就是命令的返回值)来说,其大小通常是不可控制的.有可能一个简单的命令,能够产生体积庞大的返回数据.另外也有可能因为执行了太多命令,导致产生返回数据的速率超过了往客户端发送 ...

  4. 14.Git忽略特殊文件.gitignore

    有些时候,你必须把某些文件放到Git工作目录中,但又不能提交它们,比如保存了数据库密码的配置文件啦,等等,每次git status都会显示Untracked files ...,有强迫症的童鞋心里肯定 ...

  5. 第1章 1.2计算机网络概述--Intenet和广域网

    1.ISP Internet服务提供商,也称ISP运营商.如:在中国,电信.网通.长城宽带. ISP运营商内部的网络连接十分发达,但是不同ISP运营商之间的连接的线路非常有限,这就导致了跨运营商访问网 ...

  6. android showDialog用法

    protected Dialog onCreateDialog(int id) { // TODO Auto-generated method stub switch(id){ case 10: re ...

  7. C#+GDAL读取影像（1）

    环境:VS2010,C#,GDAL1.7 读取影像: using System; using System.Collections.Generic; using System.ComponentMod ...

  8. POJ1006——Biorhythms(中国剩余定理)

    Biorhythms Description人生来就有三个生理周期,分别为体力.感情和智力周期,它们的周期长度为23天.28天和33天.每一个周期中有一天是高峰.在高峰这天,人会在相应的方面表现出色. ...

  9. [golang note] 协程基础

    协程概念 √ 协程通常称为coroutine,在golang中称为goroutine. √ 协程本质上是一种用户态线程,它不需要操作系统来进行抢占式调度,在实际实现中寄存在线程之中. √ 协程系统开销 ...

  10. C Strange Sorting

    C. Strange Sorting time limit per test 2 seconds memory limit per test 256 megabytes input standard ...