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. Android面试二之Fragment

    基本概念 Fragment,简称碎片,是Android 3.0(API 11)提出的,为了兼容低版本,support-v4库中也开发了一套Fragment API,最低兼容Android 1.6. F ...

  2. Matlab 一些函数

    max(A,[],dim):dim取1或2.dim取1时,该函数和max(A)完全相同:dim取2时,该函数返回一个列向量,其第i个元素是A矩阵的第i行上的最大值.

  3. linux sed 批量替换字符串

    Linux下批量替换多个文件中的字符串的简单方法.用sed命令可以批量替换多个文件中的字符串. 命令如下: sed -i "s/原字符串/新字符串/g" `grep 原字符串 -r ...

  4. 外层页面与iframe相互调用的方法

    iframe调用外层页面的方法: parent.func(); 外层页面调用里面的iframe中的内容方法:  $("iframe").contents().find(" ...

  5. Ansible 小手册系列 十五（Blocks 分组）

    当我们想在满足一个条件下,执行多个任务时,就需要分组了.而不再每个任务都要用when. tasks: - block: - command: echo 1 - shell: echo 2 - raw: ...

  6. DNSmasq搭建DNS服务器

    原文地址:http://jirry.me/2016/04/19/dnsmasq-on-aliyun/ DNSmasq 是一个小巧且方便地用于配置 DNS 和 DHCP 的工具,适用于小型网络,它提供了 ...

  7. flume 启动，停止，重启脚本

    #!/bin/bash #echo "begin start flume..." #flume的安装根目录(根据自己情况,修改为自己的安装目录) path=/sysware/apa ...

  8. Alpha冲刺一（1/10）

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9948330.html 作业博客:https://edu.cnblogs.com/campus/ ...

  9. 初识jQuery（1）

    1.Jquery是对JavaScript对象和函数的封装(JavaScript框架) 2.怎么使用Jquery 第一步:把js文件放入项目中 第二步:在页面引用jquery <script ty ...

  10. Shell 从日志文件中选择时间段内的日志输出到另一个文件

    Shell 从日志文件中选择时间段内的日志输出到另一个文件 情况是这样的,某系统的日志全部写在一个日志文件内,所以这个文件非常大,非常长,每次查阅的时候非常的不方便.所以,相关人员希望能够查询某个时间 ...