里面的属性都 是在有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. mac os 上安装mysqldb血泪史

    昨天下午在mac上安装mysql-python一直未遂今天查了很多资料终于成功了 最后还是在stackoverflow点击打开链接(好网站啊,一般有什么技术问题在这都能找到)上找到了答案,废话少数: ...

  2. Effective Java：Ch4_Class：Item14_在public类中应该使用访问方法而不是public域

    你可能偶尔需要编写退化类,目的只是为了集中实例域: // Degenerate classes like this should not be public! class Point { public ...

  3. HDU 4062 Partition

    Partition Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  4. 谱聚类(Spectral Clustering)详解

    谱聚类(Spectral Clustering)详解 谱聚类(Spectral Clustering, SC)是一种基于图论的聚类方法——将带权无向图划分为两个或两个以上的最优子图,使子图内部尽量相似 ...

  5. SSD Buffer Pool Extension

    SSD Buffer Pool Extension 简介 SQL Server 2014中另一个非常好的功能是,可以将SSD虚拟成内存的一部分,来供SQL Server数据页缓冲区使用.通过使用SSD ...

  6. map 类型

    map 是键-值对的集合.map 类型通常可理解为关联数组(associative array): 可使用键作为下标来获取一个值,正如内置数组类型一样.而关联的本质在于元素的值与某个特定的键相关联,而 ...

  7. [置顶] NS2中对TCP数据包和ACK包的TCP Sink类的主要实现代码详尽剖析--吐血放送

    NS2中对TCP数据包和ACK包的TCP Sink类的主要实现代码详尽剖析,限于个人水平,如有错误请留言指出! TcpSink类的recv()方法: void TcpSink::recv(Packet ...

  8. UITabelview的删除

    删除的效果 Automatic Bottom Fade left middle none right top 简单删除 先删除数据源里的数据,然后再删除cell,否者会报错 let indexPath ...

  9. win7无声音显示“未插入扬声器或耳机” 怎么解决

    不知道是否有用户朋友跟本人遇到这么一个情况,电脑不论是不是有插上耳机或者扬声器,在机箱前面和后面的耳机插孔处都试了好几遍,win8纯净版系统依旧没有声音. 这时候我们来看一下桌面右下角音量图标显示一个 ...

  10. Python wifi掉线重连接

    原理很简单,通过python执行dos命令 : ping 和 netsh 需要用到os和time模块 代码如下: >>> import os >>> print ' ...