您的位置：首页 > Web前端 > CSS

css3新增的弹性盒子模型

2015-04-23 19:00 375 查看

box-align: start | end | center | baseline | stretch

start:定义每个子元素沿盒子的上边缘排列，余下的空间位于底部

end: 定义每个子元素沿盒子的下边缘排列，余下的空间位于顶部

center: 定义可用空间平均分配，上面一半，下面一半

baseline: 定义子元素沿着他们的基线排列，余下的空间可前可后

stretch: 每个子元素的高度调整到适合盒子的高度

box-flex: number

它打破了我们经常使用的float布局，实现垂直高度、水平均分、按比例划分。box-flex属性主要用来按比例分配盒子中子元素的宽度（或高度）空间

弹性盒模型来实现制作一个弹性滑动图片的效果

<Style>

.flexbox{

background-color:#ffffff;

display: -webkit-box;

display: -moz-box;

display: box;

-webkit-box-orient:horizontal;

-moz-box-orient:horizontal;

box-orient:horizontal;

box-align:stretch; /*box-align是定义子元素在盒子垂直方向上的空间分布，

stretch 每个子元素的高度调整到适合盒子的高度*/

margin-top: 20px;

position: relative;

overflow: hidden;

text-shadow: 1px 1px 1px rgba(240,240,240,0.7);

box-shadow: 0 0 10px #ccc;

-webkit-box-shadow:0 0 10px #ccc;

-moz-box-shadow: 0 0 10px #ccc;

}

.flexbox > div{

-webkit-box-flex:1;

-moz-box-flex:1;

box-flex:1; /*box-flex 用来按比例分配盒子中子元素的宽度（或高度）的空间*/

box-align:stretch;

-moz-transition:all 0.5s ease-out;

-o-transition:all 0.5s ease-out;

-webkit-transition: all 0.5s ease-out;

transiton:all 0.5s ease-out;

width: 0;

}

.flexbox > div:hover{

width: 100px;

}

img{

height: 210px;

}

</Style>

</head>

<body>

<div class="flexbox">

<div><img src="scene/scene4.jpg"></div>

<div><img src="scene/scene2.jpg"></div>

<div><img src="scene/scene3.jpg"></div>

<div><img src="scene/scene4.jpg"></div>

<div><img src="scene/scene5.jpg"></div>

<div><img src="scene/scene2.jpg"></div>

</div>

</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航