关键词：
在传统的css布局，都是依赖于position，float，dosplay进行。在一些特定的布局的实现上往往很不方便，比如一个元素的垂直居中。鉴于这种关系，2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
首先让我们明白在flex中什么是容器，什么是元素
<div>//容器 <div></div>//元素 <span></span>//元素 <img/>//元素 </div>
在flex容器内的元素，没有块级元素，行内元素的区别，都是flex元素，可以设置高宽，可以看做没有换行符的块级元素
在flex项目容器和元素分别都有一些属性值
容器
flex-direction 决定容器主轴方向
row
row-severse
column 卡拉母
column-reverse
flex-wrap 决定多个元素排列超过容器最大宽度时，是否换行,如果不换行将会制动缩小，以适应容器
wrap
nowrap
wrap-reverse
flex-flow flex-direction和flex-wrap的缩写
justify-content 元素在主轴上的对齐方式
flex-start
flex-end
center
space-between
space-around
space-evenly 元素与元素 和 元素与容器边框 平分剩余空间
align-items 元素在交叉轴上的对其方式，默认值为stretch
flex-start
flex-end
center
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
align-content 元素（多主轴时交叉轴对齐方式，只有一条主轴时无效）
flex-start
flex-end
center
stretch 咝 jua 其
space-between
space-around
元素
order:0 数值越小排序越靠前 默认为0
flex-grow:0 放大比例，如果还有剩余空间，就将剩余空间分成若干等分，如果有两个元素，一个为1一个为2，那么它们的将分别占据剩余空间的1/3和2/3。默认为0 即存在空余空间也不放大，
flex-shrink：1 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。值越大，缩小的越多，如果为0不缩小(shi in k)
align-self 允许元素有自己的对齐方式，只会覆盖掉align-items不会覆盖掉align-content,
center
flex-start
flex-end
auto
baseline
stretch 如果项目未设置高度或设为auto，将占满整个容器的高度
css3flexbox（伸缩盒/弹性盒模型）可视化指南
在http://css.doyoe.com/（CSS参考手册）中，本文对应其中的伸缩盒引入Flexbox布局官方称为CSSFlexibleBoxLayoutModule是一个CSS3新的布局模块，用于实现容器里项目的对齐、方向、排序（即使在项目大小位置、动态生成的情况）。flex容器最... 查看详情
css3flexbox布局----flex项目属性介绍
现在介绍用在flex项目上的css属性，html结构还是用ul,li结构，不过内容改成1,2,3,样式的话，直接把给ul设display:flex变成flex容器，默认主轴的方向为水平方向。index.html <ul><li>1</li><li>2</li><li>3&l... 查看详情
弹性布局总结
弹性布局对于移动端页面开发其实还是蛮重要的，今天来一些总结吧Flexbox 为 display 属性赋予了一个新的值（即 box 值）,flexbox的属性有很多，记录一些比较常用的属性：用于父元素的样式：display: box;该属... 查看详情
flex布局学习记录
一·何为弹性布局 Flexbox布局的主要思想：给容器控制项目（子元素）的宽度和高度的能力，项目可自动填充容器的可用空间，以达到适配所有类型的设备和屏幕大小的目的。项目可自动放大以填补充可用空间，这是其他布... 查看详情
css3flexbox轻松实现元素的水平居中和垂直居中
CSS3Flexbox轻松实现元素的水平居中和垂直居中网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技... 查看详情
css3flexbox轻巧实现元素的水平居中和垂直居中
CSS3Flexbox轻松实现元素的水平居中和垂直居中网上有很多关于Flex的教程，对于Flex的叫法也不一，有的叫Flexbox，有的叫Flex，其实这两种叫法都没有错，只是Flexbox旧一点，而Flex是刚出来不久的东西而已，为了方便说明，赶上新技... 查看详情
弹性布局
做了两天星巴克的项目，说一些自己以及网上整理的对弹性布局的看法。flex弹性布局1.了解两个基本概念：容器：需要添加弹性布局的元素；项目：弹性布局中的每一个子元素，称为项目；2.弹性布局使用给父容器添加display：fle... 查看详情
css布局之弹性布局
Flex(弹性布局)，是一种响应式布局，能自动伸缩盒模型达到自适应的效果。弹性布局由弹性容器(flexcontainer)和弹性项目(flexitem)组成。在弹性容器中，水平方向称为主轴(mainaxis)(起点mainstart,终点mainend)；垂直方向称为纵轴(crossaxis)(... 查看详情
css3弹性布局
二.弹性布局(重点******************************************)1.什么是弹性布局弹性布局，是一种布局方式。主要解决的是某个元素中子元素的布局方式让页面布局更加的灵活2.弹性布局专有的名词解释 1.容器要发生弹性布... 查看详情
弹性布局
1、了解两个基本概念容器：需要添加弹性布局的父元素； 项目：弹性布局容器中的每一个子元素，称为项目2、弹性布局的使用：给父容器添加display:flex/inline-flex;即可使容器内容采用弹性布局显示，而不遵循常规文档流的显... 查看详情
flex弹性布局
1、了解两个基本概念：容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目；2、弹性布局的使用：①给父容器添加display:flex/inline-flex:属性，即可使容器内容采用弹性布局显示，而不遵循常规文... 查看详情
弹性布局
1.了解两个基本概念：容器：需要添加弹性布局的父容器；项目：弹性布局容器中的每一个子元素，称为项目；2.弹性布局的使用：1)给父容器添加display:flex/inline-flex属性，即可使容器内容采用弹性布局显示，而不遵循常规文档流... 查看详情
css弹性布局
弹性盒子使用弹性布局，首先要将父盒子定义为弹性盒子。display:flexdisplay:inline-flex行级弹性盒子,类似inline-block弹性元素弹性盒子内的元素称为”弹性元素“。弹性布局实际上就是要对弹性元素的排列做各种设置。排列方向flex-di... 查看详情
弹性布局
弹性布局一个盒子，如果将其display属性设置为flex，该盒子变为弹性盒（弹性容器），该盒子的所有子元素，自动变为弹性项目。弹性盒本身按照自身的定位体系排列，弹性布局影响的仅仅是弹性盒中的弹性项目属性：flex-di... 查看详情
弹性布局详解——5个div让你学会弹性布局
1弹性布局简介 弹性布局，又称“Flex布局”，是由W3C在2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持，我们可以放心大胆的使用。 >... 查看详情
弹性布局
【弹性布局】 1、了解两个概念 容器：需要添加弹性布局的父元素； 项目：弹性布局容器中的每一个子元素，称为项目。 2、弹性布局的使用 ①给父... 查看详情
css3弹性布局和多列布局
弹性盒子基础弹性盒子(FlexibleBox)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义display属性：#box{display:-webkit-flex;//webkit内核浏览器的兼容设置，下同display:flex;}当然还有行... 查看详情
css3弹性布局和多列布局
弹性盒子基础弹性盒子(FlexibleBox)是css3中盒子模型的弹性布局，在传统的布局方式上增加了很多灵活性。定义一个弹性盒子在父盒子上定义display属性：#box{display:-webkit-flex;//webkit内核浏览器的兼容设置，下同display:flex;}当然还有行... 查看详情