css3弹性盒子是一种布局方式，在适应不同的屏幕大小的时候，能够确保元素拥有更恰当的排布行为。它只是视觉呈现上的，即显示顺序适应显示空间，与源代码无关，源代码顺序不受影响。

定义一个弹性盒子：

在css中，设置display：

display：flex；/-webkit-flex;

或者  display：inline-flex;

在弹性容器上无效的属性：

多栏布局模块的  column-*属性；

float与clear对弹性项目无效，使用float使元素的display属性为block;

vertical-align对弹性项目的对齐无效。

例子：

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<title>
弹性盒子test
</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body{
width:80%;
margin:0 auto;
font:12px Helvetica;
background:#999999;
}

.box{
margin:0px;
min-height:400px;

display:flex;                //创建flex容器，对IE10：display:-ms-flexbox;老版本语法：-webkit-box/-moz-box;
flex-direction:row;

display:-webkit-flex;
-webkit-flex-direction:row;

flex-wrap:nowrap;
justify-content:center;//设置弹性项目与弹性容器主轴的对齐方式。
align-items:center;//侧轴对齐方式。
align-content:center;//堆栈伸缩行
}

.box > div{
margin:5px;
padding:5px;
min-height:60px;
min-height:60px;
border:1px solid red;
border-radius:15px;
background:yellow;
-webkit-flex: 1 6 20%;  //项目放大比例、项目缩小比例、在分配多余空间之前，项目占据的主轴空间。
flex:1 6 20%;
}

header,footer{
display:block;
margin:4px;
padding:5px;
min-height:100px;
background:#777777;
}

@media all and (max-width:640px){
.box {
-webkit-flex-flow:column;
flex-flow:column;
}

.box>div{

min-height:50px;
max-height:50px;

}
}

</style>
</head>
<body>

<header>弹性盒子实验</header>

<div class="box">
<div class="a">1弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验弹性盒子实验</div>
<div class="b">2</div>
<div class="c">3</div>
<div class="d">4</div>
<div class="e">5</div>
<div class="f">6</div>
</div>

<footer>footer</footer>
</body>
</html>

弹性盒子解决了内容难以控制，源码顺序依赖，内容居中等问题，能够实现更好的布局。

css弹性盒子学习的更多相关文章

  1. 使用css弹性盒子模型

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

  2. CSS 弹性盒子模型

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

  3. CSS弹性盒子的基本用法

    .container { width: 302px; height: 302px; border: 1px solid; display: flex } .item { width: 100px; h ...

  4. 快速使用CSS 弹性盒子

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现:2009年,W3C提出了一种新的方案 ...

  5. CSS：CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  6. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  7. css弹性盒子

    body元素设置: <body> <div id="wai"> <div class="zi">1</div> ...

  8. css 弹性盒子--“垂直居中”--兼容写法

    使用弹性盒子兼容低端适配有时需要: display:flex 和 display:-webkit-box   display: -webkit-box; -webkit-box-align: cent ...

  9. CSS 弹性盒子布局

    学习地址:https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

随机推荐

  1. 【转】解决:fatal error C1083: 无法打开预编译头文件

    http://blog.csdn.net/aafengyuan/article/details/7988584 是这样的,我创建了一个空项目,并通过"项目属性>C/C++>预编译 ...

  2. C#线程系列讲座(4)：同步与死锁

    虽然线程可以在一定程度上提高程序运行的效率,但也会产生一些副作用.让我们先看看如下的代码:     class Increment     {         private int n = 0;   ...

  3. Java Servlet（一）：创建工程(jdk7+tomcat7+eclipse)

    本篇文件主要记录下怎么在jdk7+tomcat7下,使用eclipse创建并运行一个servlet工程. 安装具体步骤从网上搜索就可以找到,这里不再赘述. 在eclipse中切换到j2ee下, 从导航 ...

  4. Mybatis-Plugin插件学习使用方法

    以下教程仅供学习使用,针对于IntelliJ Idea 15中的Mybatis Plugin插件. 作者博客中的教程:http://myoss.github.io/2016/MyBatis-Plugi ...

  5. JS，CSS，HTML制作网页首页，视频轮播，隐藏点击等等。

    在整个项目中,总共写了1000+的代码,可以更加简单优化的.整个主页交互效果能基本,包括轮播,视频,点击变化形状,移入蒙版,瀑布流加载滑动,旋转等等.轮播导航没有完全做完,暂时做了往右无限推动.个人觉 ...

  6. MFC架构

    MFC的六大关键技术: 1)MFC程序的初始化过程 2)消息映射 3)运行时类型识别(RTTI) 4)动态创建 5)永久保存 6)消息传递 一.MFC的初始化过程: MFC的架构组成: 1.要有CWi ...

  7. 多屏复杂动画CSS技巧三则(转载)

    本文转载自: 经验分享:多屏复杂动画CSS技巧三则

  8. paper 87：行人检测资源（下）代码数据【转载，以后使用】

    这是行人检测相关资源的第二部分:源码和数据集.考虑到实际应用的实时性要求,源码主要是C/C++的.源码和数据集的网址,经过测试都可访问,并注明了这些网址最后更新的日期,供学习和研究进行参考.(欢迎补充 ...

  9. bootstrap, boosting, bagging 几种方法的联系

    http://blog.csdn.net/jlei_apple/article/details/8168856 这两天在看关于boosting算法时,看到一篇不错的文章讲bootstrap, jack ...

  10. dbo与db_owner区别

    dbo 是具有在数据库中执行所有活动的暗示性权限的用户.将固定服务器角色 sysadmin 的任何成员都映射到每个数据库内称为 dbo 的一个特殊用户上.另外,由固定服务器角色 sysadmin 的任 ...