相比初学html的同学们都知道，在学习基础的过程中有一个东西使我们必须要掌握的，那就是盒模型，那接下来给大家分享的这个是盒模型的进阶，叫弹性盒模型。弹性盒模型(Flexble Box或Flexbox)是一个CSS3新增布局模块，官方称为CSS Flexble Box Layout Module,用于实现容器里项目的对齐、方向、排序等情况。
其最大的特性在于能够动态的修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局。
名词解释：
弹性容器(flex container)
弹性子元素(flex item)
轴分为主轴(main axis)跟侧轴(cross axis),弹性子元素沿着主轴依次排列，侧轴垂直于主轴
弹性容器的主轴开始(main start)、主轴结束(main end)和侧轴开始(cross strat)、侧轴结束(cross end)代表了弹性子元素排列的其实和结束位置。
弹性容器属性：
flex-direction 设置主轴方向，确定弹性子元素排列方式
flex-wrap 当弹性子元素超出弹性容器范围时是否换行
flex-flow flex-direction和flex-wrap属性的快捷方式，复合属性
justify-content 主轴上的对齐方式
align-items 侧轴上的对齐方式
align-content 侧轴上有空白时，侧轴的对齐方式
弹性子元素属性：
order 控制弹性容器里面子元素的顺序
flex-grow 设置弹性子元素的扩展比率
flex-shrink 设置弹性子元素的收缩比率
flex-basis 指定弹性子元素伸缩前的默认大小值，相当于width和geight属性
flex 上面的三个属性的复合属性
align-self 允许独立的弹性子元素覆盖弹性容器的默认对其设置(align-itams)
这里只是让大家对弹性盒模型跟弹性子元素的相关属性有个认识，至于方法的话这里就不一一介绍了，大家可以去网上搜索学习 |
|
收藏
淘帖
踩
