关键词：
关于flex布局，我觉得它在布局里简直就是一匹黑马，不愧为弹性布局
阮一峰大神有一篇博客，讲的超级详细 （http://www.ruanyifeng.com/blog/2015/07/flex-examples.html）地址献上....
下面来举例一下 我平时是什么场合派它上战场
1、左右居中
HTML
<div class="wrapper"> <div class="box"></div> </div>
CSS
.wrapper display: flex; justify-content: center;
2.左右上下居中
CSS
.wrapper display: flex; justify-content: center;/*左右*/ align-items: center;/*上下*/
3.6项目
HTML
<div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
CSS
.wrapper display: flex; flex-wrap: wrap;
它还有很多很多的技能，这里我就不一一举例了，写这三个我常用的
Emm 就是这样
网页布局——flex布局(代码片段)
...存留了很多需要实现的重要功能问题(例如，垂直居中)。display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:fle 查看详情
flex布局(代码片段)
...使用时，必须加上-webkit-前缀，以下不再重复说明。.box1display:flex;.box2display:inline-flex;.box3display:-webkit-flex;/*Safa 查看详情
flex布局(代码片段)
...quo;，所以flex布局一般称为弹性布局。flex容器：所有含有display:flex|inline-flex;的容器都是flex容器。flex项目：flex容器的所有子元素都是flex项目。（不包括孙元素）容器默认存在两根轴：水平的主轴（mainaxis）和垂直的交叉轴（cross... 查看详情
flex弹性布局各种坑爹兼容(代码片段)
参考链接：https://www.cnblogs.com/yangjie-space/p/4856109.html display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;定义子元素排列-webkit-box-orient:vertical;-webkit-box 查看详情
前端布局神器display:flex(代码片段)
...最大的灵活性。任何一个容器都可以指定为Flex布局。.boxdisplay:-webkit-flex;/*在webkit内核的浏览器上使用要加前缀*/display:flex;//将对象作为弹性伸缩盒显示当然，行内元素也可以使用Flex布局。.boxdisplay:inline-flex;//将对象作为内联块级... 查看详情
display:flex布局(代码片段)
display:flex;是一个CSS属性，用于设置元素的布局模式。该属性可以将一个元素的子元素排列为一条线，并通过一些属性来指定排列方向、对齐方式、间距等。具体地说，使用display:flex;可以让一个元素成为flex容器，它的子元素就会... 查看详情
flex布局入门总结——语法篇(代码片段)
... Flex布局？Flex全名FlexibleBox即弹性布局，基本用法：display:flex;行内元素：display:inline-flexwebkit内核的浏览器必须加上-webkit前缀. 查看详情
弹性布局/流动式布局(代码片段)
...布局的多个版本对比。旧版本的语法在声明时使用的是：display:box，到2011年变换为：display:flexbox，到了现在新版本声明时用的是:display:flex新旧版本语法对比如下：2、flex布局的相关语法和知识点首先说几点需要注意的：1）、任... 查看详情
flexbox布局(代码片段)
...用空间。Flexbox由伸缩容器和伸缩项目组成。一个设有「display:flex」或「display:inline-flex」的元素是一个伸缩容器，伸缩容器的子元素被称为伸缩项目，这些子元素使用伸缩布局模型来排版。设置为flex的容器被渲染为一 查看详情
flex布局(代码片段)
设置flex布局：display:flex;容器属性：1.flex-direction//主轴方向，row,column2.justify-content//主轴方向排列方式，如：spance-around,spance-between,flex-start,flex-end,center3.align-items//用于主轴交叉轴方向对齐方式，如：等高stretch,flex-start,fle 查看详情
flex布局(代码片段)
一、flex布局体验二、flex布局原理display:flex; 三、flex布局父项常见属性3.1常见父项属性3.2flex-direction设置主轴的方向 3.3justify-content设置主轴上的子元素排列方式 justify-content属性定义了项目在主轴上的... 查看详情
简单的布局套路(代码片段)
...加上float:left给父元素加上clearfix.clearfix::aftercontent:‘‘;display:block;clear:both;Flex布局给父元素加上display:flex;给父元素加上justify-content:space-between;发现两个Flex小游戏（感觉好脑残）不过挺适合新人学习的：http://flexboxfrogg 查看详情
flex布局(代码片段)
1.flex-dierction1.box-father2display:flex;3//默认row(行)4flex-direction:row;5//行反6flex-direction:row-reverse;7//列8flex-direction:column;9//列反10flex-direction:column-reverse;11.box12width:50px;13height: 查看详情
弹性布局----flex(代码片段)
1.背景 传统的布局方案于盒状模型,依赖display+position+float的方式实现,灵活性较差,对于那些头数的布局非常不方便. 2009年,W3C提出了一种新的方案--Flex布局.2.什么是Flex布局? Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒... 查看详情
flex布局(代码片段)
...个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性+position属性+float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地... 查看详情
flex---弹性布局(代码片段)
...项功能。布局的传统解决方案：基于盒状模型，依赖 display 属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。二、基本概念 容器： 需要添加弹性布局的父元素... 查看详情
flex布局(代码片段)
布局的传统解决方案，基于盒状模型，依赖 display 属性+ position属性+ float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应... 查看详情
flex布局滚动条失效(代码片段)
flex布局中，父元素：parent:display:flex;子元素：child:flex:1;overflow:auto;子元素默认占满父元素；子元素内容超过后，没有出现滚动条；子元素：child:flex:1;overflow:auto;width:0;//横向需要滚动条的话height:0;//纵向需要滚动条的话 查看详情