Flex常见布局实例

rickchen 发布于2019-08-30 15:43 / 1655人阅读

摘要：圣杯布局圣杯布局指的是一种最常见的网站布局。代码如下代码如下这里主要使用到了使得子元素水平排列，并且换行总结这是我简单总结的一些布局。

如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex 布局

1、网格布局 1.1、基本网格布局

最简单的网格布局，就是平均分布。
HTML代码如下。

CSS代码如下。

.Grid {
  display: flex;
}

.Grid-cell {
  flex: 1;
  background: #eee;
  margin: 10px;
}

这里最关键的就是flex:1使得各个子元素可以等比伸缩

1.2、百分比布局

某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间。
HTML代码如下。


    50%
    auto
    auto


    auto
    50%
    1/3

CSS代码如下。

.col2 {
  flex: 0 0 50%;
}
.col3 {
  flex: 0 0 33.3%;
}

这里最关键的是通过flex的第三个属性，也就是flex-basis来定义元素占据的空间。

2、圣杯布局

圣杯布局（Holy Grail Layout：）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。
HTML代码如下。


    header
    
      content
      nav
      aside
    
    footer

CSS代码如下。

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.body {
  display: flex;
  flex: 1;
}

header,
footer {
  flex: 0 0 100px;
}
.content {
  flex: 1;
}

.ads,
.nav {
  flex: 0 0 100px;
}

.nav {
  order: -1;
}

.bg {
  background: #eee;
  margin: 10px;
}

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

  .nav,
  .ads,
  .content {
    flex: auto;
  }
}

这里面需要注意的点有

container的flex-direction: column这样保证了header,body,footer是在垂直轴上排列

header,footer的高度可以通过flex: 0 0 100px来控制

nav可以通过order:-1来调整位置

通过@media (max-width: 768px)来调整小屏幕的页面结构

3、侧边固定宽度

侧边固定宽度，右边自适应
html代码如下。


    aside
    
      header
      content
      footer

CSS代码如下。

.bg {
  background: #eee;
  margin: 10px;
}
.container1 {
  min-height: 100vh;
  display: flex;
}
.aside1 {
  /* flex: 0 0 200px; */
  flex: 0 0 20%;
}
.body1 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.content1 {
  flex: 1;
}
.header1, .footer1 {
  flex: 0 0 10%;
}

这个和上面的基本差不多就不做解释了。

4、流式布局

每行的项目数固定，会自动分行。
html代码如下

css代码如下

.container2 {
  width: 200px;
  height: 150px;
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.item {
  box-sizing: border-box;
  background: #eee;
  flex: 0 0 20%;
  height: 40px;
  margin: 5px;
}

这里主要使用到了flex-flow: row wrap使得子元素水平排列，并且换行

总结

这是我简单总结的一些布局。如有错误，欢迎指正。更多系列文章

专线服务服务器托管 flex布局 flex flex40 flex 教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116023.html

利用HTML和CSS实现常见的布局

摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...

daydream 2019-08-28 18:21 评论0 收藏0
利用HTML和CSS实现常见的布局

摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...

jsbintask 2019-08-02 18:21 评论0 收藏0
利用HTML和CSS实现常见的布局

摘要：中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。我称之为果冻依赖型元素，又称之为依赖型元素，也就是说只有一个元素属于或是也可以理解为水平水平，其身上的属性才会起作用。单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，...

bbbbbb 2019-08-01 14:53 评论0 收藏0
CSS Flex 布局：用 Flex 来实现圣杯布局

摘要：布局是年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。实践用来实现圣杯布局圣杯布局指的是一种最常见的网站布局。一般情况下，这种布局要求固定高度，固定宽度，自适应。 Flex 布局是 W3C 2009年提出的，目前已经被所有浏览器支持，也是我现在布局的首选方案。Flex 布局使用起来是非常简单的，本文谈一谈平时使用可能需要注意的问题。 align-content 平时使用 ...

Olivia 2019-08-22 15:13 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0