由于在日常工作中使用css或者bootstrap的栅格系统已经能很好的满足业务需求，所以一直以来对css3的弹性布局不是很感冒。 近日有幸在一篇文章中领略了flex的魅力--简洁优雅。随试之。 以上就是flex相关的所有属性。详情可以参考 阮一峰大神的博文，很详细哦！ 现在 ...

一、什么是flex? flex是css3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局. 二、怎么使用flex? 任何一个容器都可以指定为flex布局 三、flex的基本术语 采用flex布局的元素被称为flex容器 ...

（flex用到的比较多） 给父级设置display：flex；这个父级就变成了一个具备弹性功能的盒子区域， ...

1、在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box: 新版弹性盒模型：flex：display : flex 老版弹性盒模型：box : display : -webkit-box 2、box-orient 定义盒模型 ...

CSS3弹性盒布局 一、总结 一句话总结： 弹性盒子主要是设置display属性为flex，用于多列布局，功能强大，操作特别简单。 1、弹性盒子常用的属性有哪些？ flex-direction（盒子中item排列方向）、flex-wrap（item超出父元素是否换行 ...

首先，我们来对弹性盒中的称呼做一些了解 如图，弹性盒分为两个轴，一个是主轴，一个是交叉轴，主轴方向可以改变（左右改上下），主轴方向改变后，交叉轴方向也会随之改变 然后，我们来看下浏览器的大概支持情况 从图上可以看出，ie对于弹性盒的支持可以说是呵呵了，其他的浏览器还可 ...

盒子变成弹性盒子 display:flex; 弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成 flex容器 flex布局图 flex六个属性 1.flex-direction 决定主轴的方向 flex ...

1.等分布局： 中间固定两边自适应： 固定两个，一个自适应 2.流式布局： 模仿float浮动布局 3.圣杯布局：（自适应布局） 先来看一下结构布局： ...