您的位置：首页 > 其它

Flex布局实现圣杯布局，左右两列固定、中间列自适应的三列式布局

2016-04-08 17:38 836 查看

一、Flex主要解决两个问题：

1、元素位置：由6个容器属性和2个项目属性控制

6个容器属性

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content


2个项目属性

order
align-self


2、元素尺寸或自适应能力：由4个项目属性控制

4个项目属性（也可以说是3个，因flex是flex-grow、flex-shrink、flex-basis的集合，后两个可选）

flex-grow
flex-shrink
flex-basis
flex


关于上述这些属性的介绍和使用，请查看前面的文章Flex布局教程：语法篇。

二、使用flex实现圣杯布局

圣杯布局格式要求：

页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

中部三列式布局：左右两列定宽，不可伸缩；中间内容区自适应。

完整代码及代码分析如下：

CSS代码：

<style type="text/css">
*{
box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
margin:0;
padding:0;
}

body{
display:flex;
flex-direction:column;/* 头、中部、脚纵向显示 */
}

header,footer{
flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */
background:#3f3f3f;
}

.main{
display:flex;

/*
flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)    分配多余空间之前项目占据的主轴空间(flex-basis)
flex:1指的是：中部区域自由伸缩
auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
*/
flex:1;
}

.content{
background:red;
height:1000px;

/*
横向中间内容区自适应，即使未指定宽度，但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
*/
flex:1;
}
.left,.right{
height:800px;
background:blue;
flex:0 0 100px;/* 左右两列固定宽 */
}

.left{
order:-1;/* 让left居于左侧 */
}

</style>


HTML代码：

<body>
<header></header>
<div class="main">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航