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. LA-4255 Guess （拓扑排序+构造）

    题目大意:一个未知的整数序列,给出其任意一个区间和的正负,还原这个序列.任意一个满足条件的序列即可. 题目分析:将连续区间和转化为前缀和之差,sumx-1与sumy的大小关系已知,以此建立一条有向边, ...

  2. [nodejs]国内npm安装nodejs modules失败的几个解决方案

    使用npm安装node模块时经常有卡住安装失败的情况,如图所示.原因在于npm服务器在美国,还有就是某强大的防火墙作用.这样的问题导致很多新手放弃使用node,几乎每天都有新手再问这个问题.现在分享一 ...

  3. Kubernetes 1.5.3 部署

    > kubernetes 1.5.3, 配置文档 # 1 初始化环境 ## 1.1 环境: | 节 点  |      I P      ||--------|-------------||no ...

  4. Java进阶2 数组内存和对象的内存管理知识

    Java进阶2 数组内存和对象的内存管理知识 20131028 前言: 在面试的时候,如果是Java的编程语言,也许你认为没有什么可以问的,只能够说明你对于Java了解的太浅了,几乎就是两个星期的节奏 ...

  5. Prism5.0开发人员指南内容（纯汉语版）

    Prism指南包含以下内容: 下载并安装Prism Prism5.0新内容 介绍 初始化应用程序 组件间的依赖管理 模块化应用程序开发 实现MVVM模式 进击的MVVM 组合式用户界面 导航 松耦合组 ...

  6. bzoj1997

    题解: 在圆上面的点能不能不交叉 和那一题差不多 http://www.cnblogs.com/xuanyiming/p/8110597.html 代码: #include<bits/stdc+ ...

  7. windows下类似Linux下的grep命令

    今天要查看windws下代理服务器有哪些IP连接过来,但使用 netstat -na 后出现很多连接会话,不方便查看. 想到Linux下的grep非常方便,于是网络上搜寻,还是有类似的命令findst ...

  8. C++开发人脸性别识别教程（6）——通过SVM实现性别识别

    http://blog.csdn.net/u013088062/article/details/50480518

  9. java正则匹配多个子字符串样例

    文本内容: 上海市黄浦区瑞典江苏省无锡市广东省深圳市南山区 我希望分别将字符串中的省份,城市名,城区名匹配出来,如匹配不出来就默认放在省份中. public static HashMap<Str ...

  10. three.js入门系列之导入拓展类

    先来看一下three.js包的目录结构: 我们使用的时候,可以一次性import所有的功能,也可以按需引入,全依赖three.module.js这个文件对three.js的功能作了模块化处理: 但是, ...