flex的兼容性在pc端还算阔以，但是在移动端，那就呵呵了。今天我们只是学习学习，忽略一些不重要的东西。

首先flex的使用需要有一个父容器，父容器中有几个items.

父容器：container

属性：

　　 display:flex;/*flex块级，inline-flex:行内快*/

　　 justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/

　　 align-items:stretch;/*center:垂直居中、flex-start：至顶、flex-end:至底、space-between、space-around*/　　

　　 flex-direction: row;/*column从上向下的排列，column-reverse、row:从左到右，row-reverse:从右向左*/

　　 flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/

/*flex-flow是flex-direction、flex-wrap的缩写*/

这里给出一个简单的demo:

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <style>

	.container{

	   width:600px;

	   height:400px;

	   border:1px solid #000;

	   display:flex;/*flex块级，inline-flex:行内快*/

	   justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:两边的向两边靠，中间等分；space-around:完美的平均分配*/

	   align-items:stretch;/*center:垂直居中、flex-start,至顶，flex-end:至底*,space-between、space-around*/

	   flex-direction: row;/*column从上向下的排列，column-reverse,,,,row:从左到右，row-reverse:从右向左*/

	   flex-wrap:wrap;/*wrap多行显示（父容器不够显示的时候，从上到下）、nowrap(当容器不够宽的时候，子元素会平分父容器的宽或者高)、wrap-reverse:从下向上*/

	   /*flex-flow是flex-direction、flex-wrap的缩写*/

	}

	.box{

	　　width:200px;

	 　 height:100px;

	    border:1px solid #000;

	 }

   </style>

 </head>

 <body>

     <div class="container">

　　　　   <div class="box">这是中间的box1</div>

        　<div class="box">这是中间的box2</div>

　　　</div>

 </body>

</html>

子元素的属性：　

 order：设置元素的顺序

例如：我么想要将本来第二个元素排在第一，将排在第一的元素设置为第二。

我们可以设置他们的order值。

.box1{order:1;}

.box2{order:0;}

   <div class="container">

	<div class="box box1">这是中间的box1</div>

	<div class="box box2">这是中间的box2</div>

 </div>　　

flex:指定可伸缩长度的部件，是flex-shrink,flex-grow,flex-basis这三个属性的缩写。

他可以指定一个子元素的占据父元素的宽度或者高度的比例。（前提是在子元素还没有占满父级元素的情况下）

demo:

 <style>

	.container{

		width:800px;

		height:600px;

		border:1px solid red;

		display:flex;

		align-items:center;

		justify-content:center;

		flex-direction:row;

		flex-wrap:wrap;

	}

	.box{

	    width:200px;

		height:200px;

		border:1px solid blue;

	}

　　　　.box1{

	　　flex:2

	}

  </style>

 </head>

 <body>

    <div class="container">

		<div class= " box box1">1</div>

		<div class="box box2">2</div>

		<div class="box box3">3</div>

		<div class="box box4">4</div>

	</div>

 </body>　

最终效果如下：因为子元素占满父级元素。

进一步验证：

<style>

	.container{

		width:800px;

		height:600px;

		border:1px solid red;

		display:flex;

		align-items:center;

		justify-content:center;

		flex-direction:row;

		flex-wrap:wrap;

	}

	.box{

	    width:200px;

		height:200px;

		border:1px solid blue;

	}

　　　　.box1{

	　　flex:2

	}

  </style>

 </head>

 <body>

    <div class="container">

		<div class= " box box1">1</div>

		<div class="box box2">2</div>

	</div>

 </body>　

　很明显的阔以看到，box1占据了600px宽度

　

align-self:用来单独设置子元素的对齐方式（可将默认的对齐方式进行覆盖）

例如:我们已经在父元素中设置了align-items:center.(将子元素设置为垂直居中显示)

这个时候我们想单独更改某个子元素的对齐方式，就可以使用align-self

 <style>

	.container{

		width:800px;

		height:600px;

		border:1px solid red;

		display:flex;

		align-items:center;

		justify-content:center;

		flex-direction:row;

		flex-wrap:wrap;

	}

	.box{

	    width:100px;

		height:100px;

		border:1px solid blue;

	}

　　　　.box1{

	　　flex:2

	}

/* .box4{

		align-self:flex-end;

	} */

  </style>

 </head>

 <body>

    <div class="container">

		<div class= " box box1">1</div>

		<div class="box box2">2</div>

        <div class="box box3">3</div>

		<div class="box box4">4</div>

	</div>

 </body>

　

假如我们设置 box4：align-self:flex-end;呢？？？？？

 .box4{

　　align-self:flex-end;

  }

好了，已经改变了box4的对齐方式。

如果想兼容更多的浏览器，可以采用优雅降级的方式，例如sass-flex-mixin

参考：https://juejin.im/entry/5804638e67f3560058c6f914

　

display的flex属性使用详解的更多相关文章

  1. flex属性设置详解

    CSS代码中常见这样的写法:flex:1 这是flex 的缩写: flex-grow.flex-shrink.flex-basis,其取值可以考虑以下情况: 1. flex 的默认值是以上三个属性值的 ...

  2. css 13-CSS3属性：Flex布局图文详解

    13-CSS3属性:Flex布局图文详解 #前言 CSS3中的 flex 属性,在布局方面做了非常大的改进,使得我们对多个元素之间的布局排列变得十分灵活,适应性非常强.其强大的伸缩性和自适应性,在网页 ...

  3. html5的float属性超详解（display，position， float）（文本流）

    html5的float属性超详解(display,position, float)(文本流) 一.总结 1.文本流: 2.float和绝对定位都不占文本流的位置 3.普通流是默认定位方式,就是依次按照 ...

  4. day17—Flex弹性布局详解（一）

    转行学开发,代码100天——2018-04-02 今天看到一篇大神的文章,关于flex布局的详解,对flex用法介绍的相当详细,非常有助于我等初学者更深入了解这种布局方式. 文章链接 [基础知识]Fl ...

  5. CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  6. CSS3教程:pointer-events属性值详解 阻止穿透点击

    转:http://www.poluoluo.com/jzxy/201109/142876.html 在某个项目中,很多元素需要定位在一个地图层上面,这里就要用到很多绝对定位或者相对定位的元素,但是这样 ...

  7. Delphi中TStringList类常用属性方法详解

    TStrings是一个抽象类,在实际开发中,是除了基本类型外,应用得最多的. 常规的用法大家都知道,现在来讨论它的一些高级的用法. 先把要讨论的几个属性列出来: 1.CommaText 2.Delim ...

  8. CSS定位属性Position详解

    CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position. 1. position:static 所有元素的默认定位都是:position ...

  9. js原生之scrollTop、offsetHeight和offsetTop等属性用法详解

    scrollTop.offsetHeight和offsetTop等属性用法详解:标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼容 ...

随机推荐

  1. java开发中的重中之重-------mysql（基础篇）

    介绍: mysql是目前世界上最流行的关系型数据库,在国内大的互联网公司都在使用mysql数据库,mysql经常被我们这样概述,“mysql是轻量级关系型数据库”,其实轻量级并不是说mysql是中小型 ...

  2. struts.xml路径修改后的web配置

    <?xml version="1.0" encoding="UTF-8"?> <web-app id="WebApp_9" ...

  3. SPOJ 5152 Brute-force Algorithm EXTREME && HDU 3221 Brute-force Algorithm 快速幂,快速求斐波那契数列,欧拉函数,同余 难度:1

    5152. Brute-force Algorithm EXTREME Problem code: BFALG Please click here to download a PDF version ...

  4. SQL SERVER 算法执行效率

    较差的性能 <---没有索引(为每个表执行表扫描) --->非聚集非覆盖索引(seek+局部有序扫描+lookups) ---> 聚集索引(seek+局部扫描) ---> 非聚 ...

  5. LeetCode OJ：Isomorphic Strings（同构字符串）

    Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the chara ...

  6. input 取消自动填充

    增加属性:  name="clear" 

  7. @Qualifier注解详解

    @Qualifier注解意味着可以在被标注bean的字段上可以自动装配.Qualifier注解可以用来取消Spring不能取消的bean应用. 下面的示例将会在Customer的person属性中自动 ...

  8. 从JDK源码角度看Byte

    Java的Byte类主要的作用就是对基本类型byte进行封装,提供了一些处理byte类型的方法,比如byte到String类型的转换方法或String类型到byte类型的转换方法,当然也包含与其他类型 ...

  9. Vim技能修炼教程(5) - 操作符实务

    操作符实务 操作符复习 上次我们讲了操作符与文本对象的组合这样一个vim的强大功能.但是上节的知识点过于密集,可读性可能差了一点.不过没关系,重要的知识点在后面用到的时候我们可以先复习一下. 我们还是 ...

  10. ExtJS小技巧

    一.从form中获取field的三个方法: 1.Ext.getCmp('id'); 2.FormPanel.getForm().findField('id/name'); 3.Ext.get('id/ ...