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

来源：互联网发布：java snmp4j 获取数据编辑：程序博客网时间：2024/05/19 14:53

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

0 0