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

最新推荐文章于 2024-05-27 16:45:45 发布

Aus0049

最新推荐文章于 2024-05-27 16:45:45 发布

阅读量489

点赞数

分类专栏： CSS 文章标签： CSS3 前端基础

本文链接：https://blog.csdn.net/u014267351/article/details/48316799

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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 属性。