里面的属性都 是在有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. HashTable类模板_C++

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

  2. Windows 安装Mongoliadb

    1. 下载 下载地址: http://www.mongodb.org/downloads 我这里用的是:mongodb-win32-x86_64-2008plus-2.4.5.zip 2. 设置目录 ...

  3. LESS编译方案

    我的LESS编译方案 2013-08-07 10:22 by 逆风之羽, 469 阅读, 2 评论, 收藏, 编辑 背景 近期项目前端决定使用less,简单介绍一下,详细信息有兴趣查看官方文档(htt ...

  4. [读书心得] .NET中 类型，对象，线程栈，托管堆在运行时的关系

    .NET中 类型,对象,线程栈,托管堆 在运行时的关系 The Relationship at Run Time between Types,Objects,A Thread's Stack,and ...

  5. XNA 4.0 环境搭建和 Hello World，Windows Phone 游戏开发

    XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发 使用 Scene 类在 XNA 中创建不同的场景(八) 摘要: 平方已经开发了一些 Windows Phone ...

  6. 让C#、VB.NET实现复杂的二进制操作

    VB.NET和C#属于高级语言,对二进制位操作的支持不是很好,比如没有了移位运算等,用的时候确实很不方便,所以在闲暇之余我重新封装了一个用于C#.VB.NET的位操作类库,通过该类库可以实现数据移位. ...

  7. java.lang.ClassNotFoundException: [Ljava.lang.String解决办法

    原来jdk5.0的时候不会报这个错,用了jdk6.0就出现了这个错误,因为没有重载java.lang.String这个类 解决方法: 在vm缺省参数里添加-Dsun.lang.ClassLoader. ...

  8. Swift3.0服务端开发(三) Mustache页面模板与日志记录

    本篇博客主要介绍如果在Perfect工程中引入和使用Mustache页面模板与日志记录系统.Mustache页面模板类似于PHP中的smarty模板引擎或者Java中的JSTL标签.当然Mustach ...

  9. Tungsten Replicator学习总结

    之前基于Tungsten Replicator实现了内部使用的分布式数据库的数据迁移工具,此文为当时调研Tungsten Replicator时的学习心得,创建于2015.7.22. 1 概述 1.1 ...

  10. 详述JavaScript数组

    摘要 数组是JavaScript中的常用类型,本文详述了数组的基本知识以及一些常用的数组方法,并对每种方法进行了详细解释 数组定义 用字面量直接定义 var arr=[0,0,0]; //注意,是方括 ...