里面的属性都 是在有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. iframe跨域通讯

    工作中遇到一个问题,IFRAME嵌套了一个外部页面用于统计 统计的JS由我们提供,并且需要提供热点图 一开始就碰到的问题就是 不知道页面高度 需要子页面传回页面高度用于将IFRAME拉升到合适高度 当 ...

  2. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  3. 将SQL获取的信息传递到Email中

    将SQL获取的信息传递到Email中 最近在为公司财务开发一个邮件通知时遇到了一个技术问题.原来我设计SSIS的是每天将ERP系统支付数据导出到财务支付平台后 Email 通知财务,然后财务到支付平台 ...

  4. asp.net MVC 路由系统

    ASP.NET的路由系统是基于物理文件的路由注册,通过调用System.Routing.RouteTable的Routes(RouteCollection)属性的MapPageRoute()方法来完成 ...

  5. strut2读源码记录

    首先你得准备一个很简单的struts2的程序,可以发一次请求后能返回一个正确的响应,当然,struts2的源码也要有,我这里用的myeclipse调试的,本来是想用eclipse,因为本人习惯于用ec ...

  6. JDBC开发

    1.JDBC简介 )数据库驱动 )Sun公司为简化数据库开发,定义了一套jdbc接口,这套接口由数据库厂商去实现,这样,开发人员只需要学习jdbc接口,并通过jdbc加载具体的驱动,就可以操作数据库. ...

  7. 使用Bundle在Activity之间交换数据

    一:在main.xml文件中设置布局 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&q ...

  8. iOS开发： 关于Certificate, Identifier & Profile

    简介 苹果的iOS系统是封闭的系统.苹果的设计是保证每一个软件有确定的开发者/厂商(保证不被第三方进行未授权修改),只能在指定的设备上运行.为达到这些目标,苹果设计了一系列的机制. Certifica ...

  9. [置顶] Adapter详解

    动态添加数据适配器adapter Adapter是适配器,许多UI组件需要搭配Adapter来显示界面,例如Spinner与ListView,另外当我们需要动态的添加数据给UI组件时就需要Adapte ...

  10. src设置变量

    从后台得到一个图片路径,想把它设置给某个img的src属性,发现直接用$("#").attr("src",data)时src,jquery自己会在这个变量外面添 ...