弹性盒子（部分元素伸缩，部分元素不伸缩）

来源：互联网发布：php 工作流开源编辑：程序博客网时间：2024/05/02 00:03

效果图：

<span style="font-family: Arial, Helvetica, sans-serif;"><header></span>

   <span style="font-family: Arial, Helvetica, sans-serif;"> <a id="header-left" href="#"></a></span>

    <div id="header-middle"></div>    <a id="header-right" href="#"></a></header>

CSS代码：

header {    height: 50px;    line-height: 50px;    display:-webkit-flex;    display:-webkit-box;    background-color: #275D9D;}#header-left {    width: 17px;    height: 30px;    background-image: url("../images/back.png");    background-size: 17px 30px;    display: block;}#header-middle {    -webkit-flex:1;    -webkit-box-flex:1;}#header-right {    width: 30px;    height: 30px;    background-image: url("../images/home.png");    background-size: 30px 30px;    display: block;}

当给header加属性:

-webkit-flex-direction:column;-webkit-box-orient:vertical;

可以实现竖排的弹性布局

0 0