黑马程序员技术交流社区

标题: 学习笔记之弹性盒模型 [打印本页]

---

作者: 南国之南    时间: 2016-7-15 13:41
标题: 学习笔记之弹性盒模型
相比初学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)


这里只是让大家对弹性盒模型跟弹性子元素的相关属性有个认识，至于方法的话这里就不一一介绍了，大家可以去网上搜索学习

---

作者: 从无到有    时间: 2016-7-15 15:38
学到东西了，现在就去实验一下看看

---

作者: 南国之南    时间: 2016-7-15 18:23

从无到有 发表于 2016-7-15 15:38
学到东西了，现在就去实验一下看看

谢谢支持，我新找了一个实例，你可以试着敲一下，参数可以自己随便改

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2