flexbox布局实例

最新推荐文章于 2024-02-12 22:19:08 发布

gigi就是我

最新推荐文章于 2024-02-12 22:19:08 发布

阅读量2.5k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/crystal6918/article/details/77069957

版权

css 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

等高布局

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

gigi就是我

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
flexbox布局实例

等高布局之前我们实现等高布局的方式通常是使用非常大的padding-bottom与负的margin-bottom，而使用flex也能轻松实现。由于align-items属性的默认值是stretch，也就是子项目会默认伸展来填满容器。因此当我们设置了容器的height，或者某一子项目的height撑开了容器，那么所有子项目默认都会stretch成容器的高度，从而实现等高。n栏布局(grid布局)一
复制链接

扫一扫

专栏目录