里面的属性都 是在有display: flex的情况 下才生效。

兼容性写法：   display: -webkit-box; /*老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

　　　　　　　display: -moz-box; /* 老版本语法: Firefox (buggy) */

　　　　　　　display: -ms-flexbox; /* 混合版本语法: IE 10 */

　　　　　　　display: -webkit-flex; /* 新版本语法: Chrome 21+ */

　　　　　　　display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

display : flex  弹性盒子 给元素加这一属性，它的子元素将进行弹性布局，其子元素会以横向（默认）方式布局；

flex-direction: 属性是指定多个元素的排列方向： row(横向排列，默认) ,row-reserse（横向反向排列）,column（纵向排列）,column-reserse（纵向反向排列）；

justify-content(在水平方向上)：在使用fle值时，可以使用这个属性，flex-start(从前面开始布局所有子元素)，flex-start(元素整体向右移，直到最后的元素到父元素的右边框 ),center(居中布局所有子元素)，space-between（ 将第一个子元素放在最前面，最后一个元素放在最后面，将空白部分平均分配在所有子元素与元素之间），spase-around (将空白部分平均分配在开头、结尾、以及各元素之间)。

align-content（垂直方向上）：center（居中布局所有元素），其它还有很多属性，可以去了解。

常用套路：justify-content：center（使里面元素水平居中）;align-content: center(使里面元素垂直居中)。一起用可以水平垂直居中。　　　　　　　　

其子元素属性：

flex: 取值为数字，表示这个可自动填满多余空间。flex:1（基本都是取1）;

order: 表示元素排列顺序.order:1,order:2;1排在2的前面，注意: 没有设order值的元素排在最前面；

flex-wrap： 控件换行方式 ，nowrap (不换行)，wrap(换行)，wrap-reserve(虽然换行最方向与wrap时方向向反)。

align- items是写在父元素上，，控制所有的子元素对齐方式，align-self是写在子元素上控制单个元素的对齐方式 。

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div.flex1{

            flex-direction:flex;

            height: 300px;

            width: 600px;

        }

        .flex1>div:nth-child(){

            /*width:100px;*/

            padding:20px;

            margin:10px;

            /*order:2;*/

            background: blue;

        }

        .flex1>div:nth-child(){

            flex:;

            padding:20px;

            /*order:1;*/

            background: red;

        }

        .flex1>div:nth-child(){

            /*width:100px;*/

            /*flex:1;*/

            margin:10px;

            padding: 20px;

            border:1px solid green;

            background: #eee;

        }

      /*.flex1>div{*/

          /*box-sizing: border-box;*/

      /*}*/

    </style>

</head>

<body>

<div class="flex1">

    <div >

        <h2>一</h2>

        <p>sdafggg地方萨芬大法师短发 模压暗示的发生模压暗示</p>

    </div>

    <div>

        <h2>二</h2>

        <p>sdfasdf靺大法师地方萨芬大法师短发 模压暗示的发生模压暗示的发地左塔顶房间爱视频地方就是偏低回复你撒泼法案房</p>

    </div>

    <div>

        <h2>三</h2>

        <p>dsfaa地方萨芬大法师短发 模压暗示的发生模压暗示</p>

    </div>

</div>

</body>

</html>

div:nth-child(1){
width:100px;
padding:20px;
margin:10px;
/*order:2;*/
background: blue;
}
.flex1>div:nth-child(2){
flex:1;
padding:20px;
/*order:1;*/
background: red;
}
.flex1>div:nth-child(3){
width:100px;
/*flex:1;*/
margin:10px;
padding: 20px;
border:1px solid green;
background: #eee;
}
/*.flex1>div{*/
/*box-sizing: border-box;*/
/*}*/
-->

一

sdafggg地方萨芬大法师短发 模压暗示的发生模压暗示

二

sdfasdf靺大法师地方萨芬大法师短发 模压暗示的发生模压暗示的发地左塔顶房间爱视频地方就是偏低回复你撒泼法案房

三

dsfaa地方萨芬大法师短发 模压暗示的发生模压暗示

flex属性值----弹性盒子布局的更多相关文章

  1. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  2. css横向 弹性盒子布局的一些属性

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  3. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

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

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

  5. flex弹性盒子布局

    一.在需要使用弹性盒子的容器上添加属性:display:flex 或者 display:inline-flex; 二.在父容器上添加flex-direction设置子元素主轴方向: 不写默认值是X轴从 ...

  6. css3 flex弹性盒子布局梳理，打通任督二脉

    挺早就接触了css的flex布局,深入使用也就是在近期移动端开发.老来多健忘,只能自己梳理一下知识点,当做温故知新吧. ,请原谅小白的才疏学浅,写的不到位的地方请指正. flex属性用于设置或检索弹性 ...

  7. 弹性盒子布局flexbox

    弹性盒子display:flexbox一般应用于父元素的容器上,然后对子元素来进行弹性布局 设置了flexbox的父元素不能设置具体的宽度与高度的值,而是通过子元素来设置值,父元素弹性的包裹既可 相关 ...

  8. 弹性盒子布局（display:flex）知识点

    设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效.

  9. Flex box 弹性盒子布局

    display: -webkit-flex 标识使用弹性布局 flex: num  占容器的比例   Flex等比划分 导航1 : Flex :1;  导航2  Flex: 2;     ————&g ...

随机推荐

  1. Silverlight类百度文库在线文档阅读器（转）

    百度文库阅读器是基于Flash的,用Silverlight其实也可以做. 我实现的在线阅读器可以应用于内网文档发布,在线阅览审批等.没有过多的堆积功能,专注于核心功能.主要有以下特性: 1. 基于XP ...

  2. EntityFramework5提供的迁移工具

    目录 背景之前是如何做的?EntityFramework5提供了更好的选择备注 背景返回目录 刚毕业做项目的时候,没有用“迁移”这个概念,系统发布和更新的过程让人非常痛苦,在学习 Ruby On Ra ...

  3. HashTable类模板_C++

    好久没看数据结构了,今天终于要用到hash,整理一下写了个hash类模板 template<typename T> class DataType { public: T key; Data ...

  4. ckeditor:复制内容到ckeditor时，只保留文本，忽略其样式解决方法

    打开ckeditor 包下的config.js,在 CKEDITOR.editorConfig= function(config){...}添加一句配置: config.forcePasteAsPla ...

  5. Javascript：由 “鸭子类型” 得出来的推论

    Javascript:由 “鸭子类型” 得出来的推论 背景 学动态语言的都知道一句话:“如果它走起来像鸭子,而且叫起来像鸭子,那么它就是鸭子”,Javascript也支持鸭子类型,下文就说说鸭子类型在 ...

  6. Visual Studio 2012的开发使用技巧

    分享10条Visual Studio 2012的开发使用技巧 使用Visual Studio 2012有一段时间了,并不是追赶潮流,而是被逼迫无可奈何.客户要求的ASP.NET MVC 4的项目,要用 ...

  7. notes/Set up development environment on windows

    恰好前几天买了个新笔记本, 15存 sony vaio, 终于从mac回到了windows. 不过作为(曾经的)*nix追随者, 没有bash真是寸步难行, 幸好windows8.x有了super s ...

  8. Ordering是Guava

    Guava学习笔记:Ordering犀利的比较器   Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering和JDK Comparator相比功能更强.它非常容易 ...

  9. centos6.5 搭建nginx1.6.0 +gridfs +mongodb2.4..10环境

    一) 缘由 因为公司业务需要,需要搭建图片服务器,需求很简单:读取+上传图片,当时第一考虑用nginx来作,但考虑到单纯用nginx来作,无法水平扩展和管理,一旦遇到海量图片,就无办法 扩展.所以考虑 ...

  10. [C++]neuroscan的延时预估

    一直用自己写的程序在线处理脑电信号,知道其中有一个时间延时,但具体延时是多少没有是个准确的估计,今天抽时间做了一下,发现大概延时在100ms左右. 以后尝试使用并口操作.应该可以完全避免这个问题. 实 ...