CSS盒模型概念
众所周知,所有页面元素都可以看成是一个盒子,占据页面一定的空间,并且元素占据的空间,要比实际使用的空间大的多。我们可以调整盒子的边框和间隔,来调整盒子的位置。盒子模型是由内容(content)、边框(border)、间隙(padding)和间隔(margin)组成。它们之间的关系如下图所示:
盒子实际的宽(高) = 内容(content)+边框(border)+ 间隙(padding)+ 间隔(margin)。对于任何一个元素,可以设置它的width和height来控制内容的宽高,也可以设置边框(border)、间隙(padding)和间隔(margin)。
引入弹性盒模型
既然每个元素都是一个盒子,那么在盒子里摆放另一个或几个小盒子的时候,就应该可以摆放到任意位置。2009年W3C提出了一种新的布局方案——flex布局,可以简便、完整、响应式的实现各种布局。目前,它已经得到了所有浏览器的支持,这就意味着,我们可以放心大胆的使用这项功能。
弹性盒模型的一些定义,如主轴、侧轴等概念性的问题,这里就不再谈了,感兴趣的同学可以自行百度,简单来说,主轴就是横轴,侧轴就是纵轴。如果了解过弹性盒模型的同学对下面这张图应该不陌生。
作为一名真正的程序员,还是直接上代码:
弹性盒子父元素属性
1、定义弹性盒模型:display: flex;
上图说明:弹性盒模型,默认排版方向是在主轴(横轴)方向从左到右。
2、修改排列方向:flex-direction
flex-direction有四个枚举值:
row: 从左到右横向排列(默认值);
column:从上到下纵向排列;
row-reverse:从右到左横向排列;
column-reverse:从下到上纵向排列;
3、子元素超出,是否换行flex-wrap:
flex-wrap有三个枚举值:
nowrap:不换行,子元素会根据父元素的宽度,并结合自身宽度,自动计算出合适的宽度,去适应父元素宽度
wrap:换行,超出部分会自动换到下一行
wrap-reverse:逆序换行,超出部分换行,换行是从下往上
4、flex-flow是flex-direction 和 flex-wrap 的简写
flex-flow: column wrap;
5、子元素在侧轴上的位置align-items
有5个枚举值:
6、修改子元素在主轴上的对齐方式justify-content
有5个枚举值:
弹性盒子子元素属性
1、子元素的排列顺序 order
用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。
2、子元素的扩展比例flex-grow
一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。