css3 box-align属性设置box的子元素如何对齐

原创 国哥笔记  2019-01-05 11:04  阅读 359 views 次

box-align属性定义及用法

box-align属性是css3 新增的属性,目前所有的主流浏览器都还不支持该属性,但是这些浏览器都通过私有属性来间接的支持该属性,就是在该属性之前加前缀。Internet Explorer 10 通过在该属性前加-ms-(是-ms-flex-align,并不是-ms-box-align)来支持该属性,Internet Explorer 9及之前版本不支持该弹性盒子属性,Firefox浏览器加-moz-(-moz-box-align),Safari、Chrome和Opera浏览器加-webkit-(-webkit-box-align)等;

box-align属性语法格式

box-align: start/end/center/baseline/stretch;

属性值说明

  • start:子元素从开始位置对齐;
  • center:子元素居中对齐(垂直);
  • end:子元素从结束位置对齐;
  • baseline:子元素基线对齐;
  • stretch:子元素自适应父元素尺寸;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-align属性设置box的子元素如何对齐</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 80px;border:1px solid mediumvioletred;}
.box1{
display:box;box-align:start;/* W3C */
display:-ms-flexbox;-ms-flex-align:start;/* Internet Explorer 10 */
display:-moz-box;-moz-box-align:start;/* Firefox */
display:-webkit-box;-webkit-box-align:start;/* Safari, Opera, and Chrome */
}
.box2{
display:box;box-align:center;/* W3C */
display:-ms-flexbox;-ms-flex-align:center;/* Internet Explorer 10 */
display:-moz-box;-moz-box-align:center;/* Firefox */
display:-webkit-box;-webkit-box-align:center;/* Safari, Opera, and Chrome */
}
.box3{
display:box;box-align:end;/* W3C */
display:-ms-flexbox;-ms-flex-align:end;/* Internet Explorer 10 */
display:-moz-box;-moz-box-align:end;/* Firefox */
display:-webkit-box;-webkit-box-align:end;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1">start:子元素从开始位置对齐;</div>
<div class="box2">center:子元素居中对齐(垂直);</div>
<div class="box3">end:子元素从结束位置对齐;</div>
</body>
</html>

运行结果:

box-align属性

更多css属性——>css属性大全

本文地址:https://www.ggbiji.com/css-box-align.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情