本文共 2025 字，大约阅读时间需要 6 分钟。
CSS3弹性布局
前言
在我们用不同设备浏览网页的时候，我们可以发现：页面的内容的布局没有较大改变，有些元素甚至只是缩放了大小。那这些网页是怎么做到的呢？别担心，学会了今天的内容，你也可以写出一个这么“灵活”的网页。
css3弹性布局
弹性布局的作用是什么？
- 可以轻松的控制元素的排列、对齐和顺序的布局方式
- 现在终端类型的繁多，导致页面需要适应不同大小的屏幕和不同设备，使用弹性布局可确保元素保留恰当的行为的布局方式。
如何创建一个弹性盒子
声明定义
父级盒子里面只需要加上一句："display:flex"
主轴和交叉轴
当使用 flex 布局时，首先想到的是两根轴线 — 主轴和交叉轴。主轴由 flex-direction 定义，另一根轴垂直于它。我们使用 flexbox 的所有属性都跟这两根轴线有关, 所以有必要在一开始首先理解它
主轴
主轴由flex-direction来定义，用于规定主轴方向，取值有：
row从左到右水平排列元素（默认值）row-reverse从右向左排列元素column从上到下垂直排列元素column-reverse从下到上垂直排列元素 当取值为row或者是row-reverse时，主轴方向为水平延伸。 为row时：
为row-reverse时
为column时
为column-reverse时
交叉轴
交叉轴垂直于主轴，所以如果你的flex-direction (主轴) 设成了 row 或者 row-reverse 的话，交叉轴的方向就是沿着列方向向下的
如果主轴方向设成了 column 或者 column-reverse，交叉轴就是水平方向。 
flex-wrap
flex-wrap规定的弹性盒子里面的弹性元素是否可以换行
wrap 在必要时可以换行 
nowrap （默认值） 不拆行或者拆列 
wrap-reverse 在必要的时候换行，但是以相反方向开始堆叠。
flex-flow
flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。
flex-direction ，第二个指定的值为 flex-wrap. 如： .father { width: 700px; height: 400px; border: 5px solid silver; display: flex; flex-direction: row; flex-flow:row wrap; /* flex-flow 是 flex-direction 与 flex-wrap 的组合简写模式。此处即为 主轴从左至右，可换行 */} justify-content
justify-content 用于控制元素在主轴上的位置
flex-start 元素紧靠主轴起点 
flex-end 元素紧靠主轴终点
center 元素从弹性容器中心开始
space-between 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间
space-around 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与容器的边距的间隔大一倍
space-evenly 元素间距离平均分配
align-items
align-items 用于在交叉轴的排列方式
取值：stretch 元素被拉伸以适应容器（默认值） center 元素位于容器的中心 flex-start 元素位于容器的交叉轴开头 flex-end 元素位于容器的交叉轴结尾 ！注意：
拉伸适应交叉轴 如果设置了 width | height | min-height | min-width | max-width | max-height ，将影响stretch 的结果， 因为 stretch 优先级你于宽高设置。align-content
stretch 将空间平均分配给元素
flex-start 元素紧靠交叉轴起点 flex-end 元素紧靠交叉轴终点 center 元素从弹性容器中心开始 space-between 第一个元素靠起点，最后一个元素靠终点，余下元素平均分配空间 space-around 每个元素两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 space-evenly 元素间距离平均分配 flex-grow
用于将弹性盒子的可用空间分配给弹性元素，可用使用整数或者小数 1.将可用空间分成若干份 （若干份：是根据flex-grow后面填写数字的总和;） 2.每个填写样式元素根据原始宽度+所占比例得出新的宽度
flex-shrink
在弹性盒子装不下时，定义的缩小数值
flex-basis
设置父级盒子宽度，优先于width
end
今天的学习就到这了，谢谢。
转载地址：http://wwezi.baihongyu.com/