盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间,通过display来改变元素遵循什么样的盒模型。
常见的盒模型:标准盒模型、怪异盒模型、这周又了解到了弹性盒模型。
总所周知,基本每个元素都有margin、border、padding、content四个属性。
标准盒模型所占平面空间大小:width/height(content)+border+padding+margin;
怪异盒模型所占平面空间大小:width/height(content+border+padding)+margin;
弹性盒模型与两者稍有不同:它容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end,请看下图:
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
弹性盒里的项目(元素)默认沿主轴排列显示,当然轴的方向可改(见下文),并且子元素会在一行上自动进行收缩处理,若子元素未定义高度,则默认为父元素的100%,它有自己的显示位置;并且有自己的默认对齐方式(align-items)。
下列是添加给弹性盒(即父元素)的属性,详细:
1、display:flex/inline-flex;flex为块级弹性盒,独占一行;inline-flex为行内块级弹性盒,元素排列在一行;设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
弹性盒只针对第一级子元素生效。
2、flex-direction属性,它决定主轴的方向(即项目的排列方向)。
默认情况下:主轴的方向从左向右的;row:在左向右的方向(默认值),row-reverse:翻转主轴水平方向的位置: 自右向左,column:自上而下的方向 (比较常用的),column-reverse:翻转垂直方向的位置:自下而上的方向。
3、flex-wrap属性,定义子元素是否换行显示,nowrap:不换行 (默认值),wrap:换行(常用),wrap-reverse:翻转wrap显示。
flex-direction属性和flex-wrap属性可简写,复合式写法,flex-flow属性默认值为row nowrap。
4、 justify-content属性 定义了项目在主轴()上的对齐方式。
flex-start :(默认值) 沿着主轴的起始点对齐的,flex-end:沿着主轴的终点对齐的,center : 沿着主轴的居中位置对齐的,space-between : 两端对齐,中间自由分配,space-around :在元素左右自动分配距离,space-evenly; 设置元素之间的空隙相等。
5、align-items属性定义侧轴方向是如何对齐。
flex-start:沿着侧轴的起始点对齐的。
flex-end:沿着侧轴的终点对齐的。
center:沿着侧轴的中间位置对齐的(相对比较常用)。
baseline:沿着侧轴的基线对齐的。
stretch(默认值):拉伸至同父元素一样高。
6、align-content属性定义了多根轴线的对齐方式,对于单行子元素,该属性不起作用。
flex-start:没有行间距。
flex-end:底对齐没有行间距。
center:居中没有行间距。
space-between:两端对齐,中间自动分配。
space-around:自动分配距离。
space-evenly:设置元素之间的空隙相等。
stretch:默认值。
项目被拉伸以适应容器。当子元素设置了高度后,在默认位置显示。