box-align 说明
box-align属性, 指定元素内子要素纵方向排列指定时使用。<规定框中子元素的显示次序。>
容器元素比子元素大很多的情况下,使用box-align属性,可以指定子元素的排序顺序,并且可以指定子元素如何表示。
还有,纵方向排列一说,可以解释为元素内子元素的配置方向默认值为水平,使用此属性后垂直方向进行排列。也可以使用 box-orient:vertical来设置子元素排列方向。
属性值
start:标准方向元素,各子要素上端沿着元素上端进行排列,余下的位置向下排序, 反方向元素的话,则沿着下端进行排序,余下的位置向上排序。<对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。 对于反方向的框,每个子元素的下边缘沿着框的底边放置。>
end:标准方向元素,各子要素下端沿着元素下端进行排列,余下的位置向上排序, 反方向元素的话,则沿着上端进行排序,余下的位置向下排序。<对于正常方向的框,每个子元素的下边缘沿着框的底边放置。 对于反方向的框,每个子元素的上边缘沿着框的顶边放置。>
center:剩余空间,进行均等分配。<均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下。>
baseline:inline-axis和horizontal的场合,所有子元素baseline配置排列<如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐。>
stretch:各子元素按照容器元素的高来自动排序(默认值)
关于居中
原来水平垂直居中写法为:height=line-height 实现垂直居中text-align实现水平居中
现在使用box-align实现垂直居中box-pack 实现水平居中
实例代码
实例图
很多朋友使用Dreamweaver一段时间后,开始热衷于寻找各式各样的插件,追求各种各...
当我们让一个模块水平居中首先想到的肯定是margin:0 auto;有木有?那么今天给大...
一、css3动画 css3动画相对于通过JavaScript动态改变元素样式性能更好,更加容易...
一 是的,CSS也有正则(阿门) CSS装逼两利器:矩阵和正则。 其实呢,我们也不必...
一. 引入外部css文件的基本样式 用 link标签引入外部样式表,其中通常要写两个属...
在HTML5的pc上面实现了相当多的功能,工作中也用到了拖拉上传,特地记录下该功能...
前言 我们在开发时,有时需要进行npm源的切换。 nrm 和 yrm 作为npm / yarn的镜...
优质网站背后的秘密是顶级的页面设计。你可能已经有了令人难忘的 域名 ,设置了...
css更改图片颜色的技巧 ,代码很简单,具体代码如下所示: tips: JPG、PNG、GIF...
前言 在有些 CSS 相互影响作用下,对元素设置的 z-index 并不会按实际大小叠加,...