您的位置：首页 > 其它

flexbox布局实例

2017-08-10 19:06 176 查看

等高布局

之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom，而使用flex也能轻松实现。

由于align-items属性的默认值是stretch，也就是子项目会默认伸展来填满容器。

因此当我们设置了容器的height，或者某一子项目的height撑开了容器，那么所有子项目默认都会stretch成容器的高度，从而实现等高。

n栏布局(grid布局)

一般都是使用float实现，但针对栏数总要更改宽度等参数，使用flex就比较方便：

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

.container{
display:flex;
}
.item{
flex:1;
}

这样就完成了，而且再增加或者减少栏数直接修改html结构即可：

<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

css根本不用改任何东西：

带有样式的完整代码：

.container{
display:flex;
background-color:#eee;
padding:20px;
}
.item{
flex:1;
height:200px;
background-color:#fff;
margin-right:20px;
}

在线DEMO

圣杯布局

先上一个最终效果图：

用flex实现的话，首先可以观察到其实是有两部分需要使用flex来布局的，一是整体布局，从上而下的：

另一个是中间内容区，分成三栏，左右两栏宽度固定，中间是自适应的，这三栏又是一个flex布局：

因此中间的部分其实既作为整体布局的item，也是内部三栏布局的容器。

具体代码：

<body >
<header> Header </header>
<div class="container">
<main class="content"></main>
<nav class="nav"></nav>
<aside class="ads"></aside>
</div>
<footer> Footer </footer>
</body>

首先是外层flex布局，从上至下的，因此要设置flex-direction

body{
display:flex;
flex-direction:column;
}

而针对中间部分的三栏布局，也要声明另一个flex容器：

.container{
display:flex;
}

然后实现中间自适应，左右两边固定宽度：

.container .content{
flex:1;

}
.container .nav{
flex:0 0 200px;
order:-1;

}
.container .ads{
flex:0 0 300px;
}

在线DEMO

下一步，其实圣杯布局是可以实现响应式的，就是在小分辨率下改为由上到下排列显示：

这里就要更改一下container的flex-direction属性了：

@media (max-width: 768px){
.container{
flex-direction:column;
}
}

在线DEMO

垂直水平居中

flex应该是解决这个问题的最优雅的方式。

.container{
display:flex;
justify-content:center;
align-items:center
}

容器内的项目甚至都不用做任何配置，也不用知道元素的大小。

在线DEMO

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航