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. vue-awesome-swiper 第一张自动跳过

    昨天在上班中要做一个商品页面,需求是从后台接口获得轮播图的路径,然后传到封装好的组件中,本来以为很简单啊,没什么毛病,开始动手~ 东西很简单,新建一个banner组件 如下: <template ...

  2. IOS-源代码管理工具(SVN)

    一.使用环境 要想利用SVN管理源代码,必须得有2套环境 服务器 用于存储客户端上传的源代码 可以在Windows上安装Visual SVN Server 大部分情况下,公司的开发人员不必亲自搭建SV ...

  3. CSS样式--移动划过超链接鼠标变手型详解

    用css控制鼠标样式的语法如下:<span style="cursor:*">文本或其它页面元素</span>把 * 换成如下15个效果的一种: 下面是对这 ...

  4. Java 进阶6 异常处理的陷阱

    Java 进阶6 异常处理的陷阱 20131113 异常处理机制是 Java语言的特色之一,尤其是 Java的Checked 异常,更是体现了 Java语言的严谨性:没有完善的错误的代码根本就不会被执 ...

  5. LeetCode OJ：Implement Stack using Queues（队列实现栈）

    Implement the following operations of a stack using queues. push(x) -- Push element x onto stack. po ...

  6. LeetCode OJ：Power of Two（2的幂）

    Given an integer, write a function to determine if it is a power of two. 看一个数是不是2的幂,代码如下: class Solu ...

  7. 什么是web?什么是web服务器？什么是应用服务器？

    1.什么是Web? 简单来说,Web就是在Http协议基础之上,利用浏览器进行访问的网站.目前来看最常用的意义是指在 Intenet 上和 HTML 相关的部分.换句话说,目前在 Intenet 上通 ...

  8. 关于$_SERVER['PHP_AUTH_USER']

    http://www.cnblogs.com/thinksasa/p/3421379.html PHP 的 HTTP 认证机制仅在 PHP 以 Apache 模块方式运行时才有效,因此该功能不适用于 ...

  9. Shell 命令行，实现对若干网站状态批量查询是否正常的脚本

    Shell 命令行,实现对若干网站状态批量查询是否正常的脚本 如果你有比较多的网站,这些网站的运行状态是否正常则是一件需要关心的事情.但是逐一打开检查那简直是一件太糟心的事情了.所以,我想写一个 sh ...

  10. 测试实战经验之checklist篇20140905

    我们测试中,在各个环节应该有自己的一个checklis来帮助我们梳理我们要做什么,该做什么,以下是我的一个小总结: 1.在测试前我们需要做的: 2.在拿到测试包后我们该做的 3.测试通过后我们该做的 ...