flexbox布局实例

来源：互联网发布：石家庄seo博客编辑：程序博客网时间：2024/06/07 06:58

等高布局

之前我们实现等高布局的方式通常是使用非常大的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

阅读全文

0 0