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. UVALive-5135 Mining Your Own Business （无向图的双连通分量）

    题目分析:在一张无向图中,将一些点涂上黑色,使得删掉图中任何一个点时,每个连通分量至少有一个黑点.问最少能涂几个黑点,并且在涂最少的情况下有几种方案. 题目分析:显然,一定不能涂割点.对于每一个连通分 ...

  2. iptables详解（7）：iptables扩展之udp扩展与icmp扩展

    前文中总结了iptables的tcp扩展模块,此处,我们来总结一下另外两个跟协议有关的常用的扩展模块,udp扩展与icmp扩展. udp扩展 我们先来说说udp扩展模块,这个扩展模块中能用的匹配条件比 ...

  3. hdu3718

    题解: 见图 按照每一个位置上有相同加一 然后km 代码: #include<cstdio> #include<cmath> #include<cstring> # ...

  4. Yii2学习笔记：汉化yii，设置表单的描述（属性标签attributeLabels）

    一:汉化框架 框架汉化在这里设置,如果不生效,前台后台的配置文件都设置下应该就可以了 二:汉化表单 汉化表单,直接在模型层设置,例如: 原来的联系我们表单 汉化后: ] 这种汉化在哪里修改呢?其实是设 ...

  5. redis高级应用特征

    Redis高级应用特性 1.安全性 2.主从复制 3.事务处理 4.持久化机制 5.发布订阅消息 6.虚拟内存的使用 安全性 设置客户端连接后进行任何其他指定前需要使用的密码. 警告:因为redis速 ...

  6. java语言基础-进制

    一丶Java语言基础:进制 1.进制的四种表现形式 (1).二进制:0,1 满2进1. (2).八进制0-7 :满8进1,用0开头表示. (3).十进制:0-9 满10进1. (4).十六进制:0-9 ...

  7. L166

    THE idea of underwater mining is not restricted to the ocean floor (see article). High water tables ...

  8. 深入理解Feign之源码解析

    转载请标明出处: 本文出自方志朋的博客 什么是Feign Feign是受到Retrofit,JAXRS-2.0和WebSocket的影响,它是一个jav的到http客户端绑定的开源项目. Feign的 ...

  9. java入门学习（4）— 类，对象理解，如何创建类，对象

    1.什么是类?具有一定相同的属性的对象的集合就叫类.2.对象:类的具体实例,就是类的实例化.比如学生是一个类(student),那学生里面的小红就是一个对象,一个有学生的属性的对象.3.如何定义一个类 ...

  10. IOS开发 Application Kit框架的线程安全

    以下部分介绍了Application Kit框架的线程安全. 非线程安全类 以下这些类和函数通常是非线程安全的.大部分情况下,你可以在任何线程使用这些类,只要你在同一时间只有一个线程使用它们.查看这些 ...