[持续更新]CSS3学习笔记(三)弹性盒子

1.  弹性盒子

弹性盒子用于页面布局。

之前面试经常会问到:写一个三列布局,左右两个定宽,中间的宽度自动伸缩门。

解决方法有很多种,可以设置三列浮动,左右定宽,中间宽度自动。

下面要说的是一种利用CSS布局来结局的比较好的方案。

使用box-flex属性告诉浏览器如何分配元素之间的未使用的空间。

看个例子:

<!DOCTYPE html>
<html>
<head>
    <title>box-flex</title>
<style type="text/css" media="screen">
* {
    padding: 0px;
    margin: 0px;
}   
.box {
    width: 200px;
    border: medium double black;
    background-color: lightgray;
    margin: 2px;
}
.container {
    display: -webkit-box;
    display: -moz-box;
}
.mindle {
    -webkit-box-flex:1;
    -moz-box-flex:1;
}
</style>
</head>
<body>
<div class="container">
    <div class="box left">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
    <div class="box mindle">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
    <div class="box right">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
</div>
</body>
</html>


上述例子中就实现了要求中的布局。

这里使用了弹性应用盒属性。

父元素属性设置display:box;子元素中,想要自动伸缩的盒子属性设置box-flex,浏览器会分配定宽的元素,然后将剩下的空间按比例分配给伸缩的元素。

上述例子中修改:

.left {
    -webkit-box-flex:3;
    -moz-box-flex:3;
}
.mindle {
    -webkit-box-flex:1;
    -moz-box-flex:1;
}

可以发现,左边元素和中间元素的比例为3:1,而且改变浏览器宽度,二者始终保持3:1。

 

这是最简单的弹性布局,除此之外,弹性盒子还可以完成很多方向的布局:

比如子元素的高度比父元素的小,这样设置资源的box-align来保持垂直高度的分配。

<!DOCTYPE html>
<html>
<head>
    <title>box-flex</title>
    <meta charset="utf-8">
<style type="text/css" media="screen">
* {
    padding: 0px;
    margin: 0px;
}   
.box {
    width: 200px;
    border: medium double black;
    background-color: lightgray;
    margin: 2px;
}
.container {
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-direction:reverse;
    -webkit-box-align:start;
    -moz-box-direction:reverse;
    -moz-box-align:start;
 
}
.left {
    -webkit-box-flex:3;
    -moz-box-flex:3;
}
.mindle {
    -webkit-box-flex:1;
    -moz-box-flex:1;
}
</style>
</head>
<body>
<div class="container">
    <div class="box left">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
    <div class="box mindle">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
    <div class="box right">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
</div>
</body>
</html>

上面这个例子中,设置box-direction为reverse,意味将子元素反防线显示。Box-align表示弹性元素的对齐方向,拥有四个值:

start 元素沿容器顶边放置,任何空间都在其下方显示。

End元素沿容器底边放置,任何空间都在其上方显示。

Center对于控件北平分为两部分,分别显示在元素的上方和下方。

Strech调整元素高度,已填充可用空间。

 

也可以为元素设置最大宽度,当元素达到最大宽度时,剩余的空间自动分配。

<!DOCTYPE html>
<html>
<head>
    <title>box-flex</title>
    <meta charset="utf-8">
<style type="text/css" media="screen">
* {
    padding: 0px;
    margin: 0px;
}   
.box {
    width: 200px;
    border: medium double black;
    background-color: green;
    max-width: 300px;
    margin: 2px;
}
.container {
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-direction:reverse;
    -webkit-box-align:center;
    -moz-box-direction:reverse;
    -moz-box-align:center;
    -webkit-box-pack:justify;
    -moz-box-pack:justify;
}
.left {
    -webkit-box-flex:3;
    -moz-box-flex:3;
    background-color: red;
}
.mindle {
    -webkit-box-flex:1;
    -moz-box-flex:1;
    background-color: blue;
}
</style>
</head>
<body>
<div class="container">
    <div class="box left">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
    <div class="box mindle">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
    <div class="box right">
        This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;This is a div;
    </div>
</div>
</body>
</html>

 

Box-pack属性的值:

start:元素从左边界开始放置,任何未分配的控件显示到最后一个元素的右边。

End:元素从右边界开始放置,任何未分配的控件显示到最后一个元素的左边。

Center:多余空间分配到第一个与阿奴的左边和最后一个元素的右边。

Justify:多余空间均匀分配到各个元素之间。

 

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页