案例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. 如何打造高性能Web应用

    Sean Hull是Heavyweight Internet Group的创始人兼高级顾问,拥有20年以上技术顾问相关经验,曾为多家知名机构提供咨询,其中包括The Hollywood Reporte ...

  2. in 和 or 的效率问题

    select * from table where col in (2,3,4,5,6) select * from table where col=2 or col=3 or col=4 or co ...

  3. redhat 5 samba配置

    1.检查安装包 #rpm –qa | grep samba 必须有以下安装结果 samba-3.0.25:samba-common-3.0.25:samba-client-3.0.25:samba-s ...

  4. 查准率与查全率(precision and recall) 的个人理解

    假设要识别照片中的狗的,在一些照片中,包含12只狗的照片和一些猫的照片.算法识别出有8只狗.在确定的8只狗中,5只实际上是狗(真阳性TP),而其余的是猫(假阳性FP).该程序的精度为5/8,而其召回率 ...

  5. 2017-2018 ACM-ICPC Pacific Northwest Regional Contest (Div. 1) Solution

    A - Odd Palindrome 水. #include <bits/stdc++.h> using namespace std; #define N 110 char s[N]; i ...

  6. 线程、进程、daemon、GIL锁、线程锁、递归锁、信号量、计时器、事件、队列、多进程

    # 本文代码基于Python3 什么是进程? 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程.程序和进程的区别就在于:程序是指令的集合,它是进程运行 ...

  7. python使用cx_Oracle连接oracle

    1.使用pip命令安装cx_Oracle $ pip install cx_Oracle 2.安装oracle客户端,并添加到path 下载路径: http://www.oracle.com/tech ...

  8. Java数据结构和算法总结-字符串相关高频面试题算法

    前言:周末闲来无事,看了看字符串相关算法的讲解视频,收货颇丰,跟着视频讲解简单做了一下笔记,方便以后翻阅复习同时也很乐意分享给大家.什么字符串在算法中有多重要之类的大路边上的客套话就不多说了,直接上笔 ...

  9. 在apache中使用.htaccess文件的注意事项

    在apache的配置文件中: <VirtualHost *:80> ServerName tp5.com DocumentRoot d:/wamp/www/tp5.com/public & ...

  10. 基于OpenCV进行图像拼接原理解析和编码实现(提纲 代码和具体内容在课件中）

    一.背景 1.1概念定义 我们这里想要实现的图像拼接,既不是如题图1和2这样的"图片艺术拼接",也不是如图3这样的"显示拼接",而是实现类似"BaiD ...