关键词：
参考技术A 什么是flex布局？传统的布局方案是基于盒模型，依赖于display:block和float+position，但是对于一些特殊的布局来说就不是很方便，如在盒模型中垂直居中。
2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chrome opera IE Firefox Sifari
flex兼容浏览器版本
但是在未来flex布局将会成为布局的首选方案。
flex是flexinle BOX的缩写。意思是弹性布局，用来为盒模型提供最大的灵活性。 任何一个容器（标签）都可以指定为flex布局。用display:flex；
如果给容器设置flex的时候当前容器内子元素的float,clear,vericla-align都将会失效
flex的基本概念
容器默认存在两根轴：水平的主轴（main axis）和垂直交叉轴（cross axis）.主轴的开始位置（与边框的交叉点）叫做main start, 结束位置叫做main end ;交叉轴的开始位置叫做cross start ,结束位置叫做cross end.项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴叫做cross size.
如果给一个元素设置为flex后，这个元素就会作为子元素的flex容器。通过给容器设置属性来改变里面子元素的位置。
二
首先要给父元素添加display:flex；将父元素转化为弹性盒
2.用flex-direction来改变盒子里元素的位置
row 默认在一行内排列（从左向右）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column ：纵向排列。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3.内容对齐（justify-content）属性应用在 弹性容器 上，把弹性项沿着弹性容器的主轴线（main axis）对齐
justify-content：flex-start 默认，左对齐（图1）
justify-content:flex-end 右对齐（图2）
justify-content:center 居中对齐（图3）
justify-content:space-between 两端对齐，中间自动分配
justify-content:space-around 自动分配距离
主轴对齐方式
4.align-items（交叉轴对齐方式）
flex-start：顶端对齐
flex-end：底对齐
center：垂直居中对齐
baseline：项目内文本的底线对齐
stretch 默认值 项目的高度自适应容器（注：子元素不能设置高）
交叉轴对齐方式
5.flex-wrap
该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
图1（nowrap）注意如果父元素盒设置宽度会自动缩子元素容器宽度
图2（wrap）
图3（warp-reverse）
容器单行或者多行方式
6、align-content（行与行之间对齐方式）
当伸缩容器的侧轴还有多余空间时，本属性可以用来调整「伸缩行」在伸缩容器里的对齐方式，这与调整伸缩项目在主轴上对齐方式的 <‘ justify-content’> 属性类似。 注：本属性在只有一行的伸缩容器上没有效果。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
深入理解css弹性盒模型flex
...型——flex布局。flex是flexiblebox的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种 查看详情
css3弹性盒模型的布局理解
...盒模型中垂直居中。2009年W3C提出一种新的布局方案，flex弹性盒布局，目前兼容的浏览器有chromeoperaIEFirefoxSifari flex兼容浏览器版本但是在未来flex布局将会成为布局的首选方案。flex是flexinleBOX的缩写。意思是弹性布局，用来为... 查看详情
弹性盒模型flex
弹性盒子模型布局方案传统的布局方案大多采用div+css+float+position+display来实现，但是随着css3中弹性盒子模型的推出，在前端布局方案中就又多出了一项彪悍的选项。而因为最近在研究小程序，发现中间使用弹性盒子布局效果更... 查看详情
神奇的css3弹性布局
七、盒模型在css中盒模型被分为两种，第一种是w3c的标准盒模型，另一种是IE6混杂模式的传统模型。他们都是对元素计算尺寸的模型。但他们的不同是计算的方式不同。①W3C标准盒模型clientWidth=width+padding+border; ②IE6混杂... 查看详情
深入理解弹性盒布局（fiex-box）——web前端系列自学笔记(代码片段)
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性displayflex-flowjustify-contentalign-itemsorderflexalign-self总结弹性盒布局小案例实现效果图使用弹性盒布局建设个人社交网站弹性盒布局弹性盒布局概述说到响应式，就不得不提CSS3... 查看详情
css3与弹性盒布局
1、弹性盒布局对齐模式1.1、弹性盒子在规定弹性盒子之中的子级元素换行显示之前父级元素必须是弹性盒子模型，也就是设置display为flex 代码如下：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>弹性盒布局... 查看详情
css3弹性盒布局方式(代码片段)
一、CSS3弹性盒子弹性盒子是CSS3的一种新布局模式。CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的... 查看详情
css3弹性盒模型flex快速入门与上手1
...常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局.二、怎么使用flex?任何一个容器都可以指定为flex布局1#box{2display:flex;3}三、flex的基本术语采用flex布局的元素被称为flex容器(flexcontainer),它的子元素即为flex元素(flex... 查看详情
弹性盒布局(flexbox)(代码片段)
注：一些理论知识来源于CSS3-菜鸟联盟弹性盒布局(FlexBox)一、概念弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式... 查看详情
弹性盒模型
Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML、GladeXML。使用该模型，可以很轻... 查看详情
css弹性盒模型(flexbox)(代码片段)
本文介绍的是CSS3规范中引入的新布局模型：弹性盒模型（flexbox）。随着响应式用户界面的流行，Web应用一般都要求适配不同的设备尺寸和浏览器分辨率。浏览器支持： 弹性盒布局的容器（flexcontainer）指的是采用了... 查看详情
flex弹性盒模型理解
...一些容易造成误解的细节点，彻底弄懂flex布局。一、flex弹性盒模型对于某个元素只要声明了display:flex;，那么这个元素就成为了弹性容器，具有flex弹性布局的特性。每个弹性容器都有两根轴：主轴和交叉轴，两轴之间成90度关系... 查看详情
css3flexbox（伸缩盒/弹性盒模型）可视化指南
在http://css.doyoe.com/（CSS参考手册）中，本文对应其中的伸缩盒引入Flexbox布局官方称为CSSFlexibleBoxLayoutModule是一个CSS3新的布局模块，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。flex容器最... 查看详情
关于弹性盒模型
...寸设备,故多用于移动端布局) 弹性盒模型布局在改变子元素排列方向,缩放,拉伸,收缩等方面,较传统布局方式有优势.ps:1.css3 列在弹性盒模型中不起 查看详情
css3深入理解flex布局
...六个字概括便是简单、方便、快速。 flex（flexiblebox：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其... 查看详情
弹性盒子
弹性盒?子弹性盒布局模型（FlexibleBoxLayout）是CSS3规范中提出的?一种新的布局?方式。它可以?用简单的?方式满?足很多常?见的复杂的布局需求。优势开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器?... 查看详情
浅谈弹性盒子布局
一.理解CSS3弹性盒布局模型Web应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式... 查看详情
css3（14）弹性盒子
CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒（FlexibleBox或flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有... 查看详情