资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Flex常见布局实例

Flex常见布局实例

rickchen / 1897人阅读

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

</>复制代码 
  1. 如果对flex不是很熟悉的同学，可以看一下我的另一篇文章Flex 布局
1、网格布局 1.1、基本网格布局

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

</>复制代码 
  2.     
    1/2
  3.     
    1/2
  4.   
  5.   
  6.     
    1/3
  7.     
    1/3
  8.     
    1/3
  9.

CSS代码如下。

</>复制代码 
  1. .Grid {
  2.   display: flex;
  3. }
  4. .Grid-cell {
  5.   flex: 1;
  6.   background: #eee;
  7.   margin: 10px;
  8. }

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

1.2、百分比布局

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

</>复制代码 
  2.     
    50%
  3.     
    auto
  4.     
    auto
  7.     
    auto
  8.     
    50%
  9.     
    1/3

CSS代码如下。

</>复制代码 
  1. .col2 {
  2.   flex: 0 0 50%;
  3. }
  4. .col3 {
  5.   flex: 0 0 33.3%;
  6. }

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

2、圣杯布局

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

</>复制代码 
  2.     
    header
  3.     
  4.       
    content
  5.       
  6.       
  7.     
  8.     
    footer
  9.

CSS代码如下。

</>复制代码 
  1. .container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   min-height: 100vh;
  5. }
  6. .body {
  7.   display: flex;
  8.   flex: 1;
  9. }
  10. header,
  11. footer {
  12.   flex: 0 0 100px;
  13. }
  14. .content {
  15.   flex: 1;
  16. }
  17. .ads,
  18. .nav {
  19.   flex: 0 0 100px;
  20. }
  21. .nav {
  22.   order: -1;
  23. }
  24. .bg {
  25.   background: #eee;
  26.   margin: 10px;
  27. }
  28. @media (max-width: 768px) {
  29.   .body {
  30.     flex-direction: column;
  31.     flex: 1;
  32.   }
  33.   .nav,
  34.   .ads,
  35.   .content {
  36.     flex: auto;
  37.   }
  38. }

这里面需要注意的点有

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

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

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

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

3、侧边固定宽度

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

</>复制代码 
  2.     
    aside
  3.     
  4.       
    header
  5.       
    content
  6.       
    footer
  7.

CSS代码如下。

</>复制代码 
  1. .bg {
  2.   background: #eee;
  3.   margin: 10px;
  4. }
  5. .container1 {
  6.   min-height: 100vh;
  7.   display: flex;
  8. }
  9. .aside1 {
  10.   /* flex: 0 0 200px; */
  11.   flex: 0 0 20%;
  12. }
  13. .body1 {
  14.   display: flex;
  15.   flex-direction: column;
  16.   flex: 1;
  17. }
  18. .content1 {
  19.   flex: 1;
  20. }
  21. .header1, .footer1 {
  22.   flex: 0 0 10%;
  23. }

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

4、流式布局

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

</>复制代码 
  2.     
  3.     
  4.     
  5.     
  6.     
  7.     
  8.     
  9.     
  10.

css代码如下

</>复制代码 
  1. .container2 {
  2.   width: 200px;
  3.   height: 150px;
  4.   display: flex;
  5.   flex-flow: row wrap;
  6.   align-content: flex-start;
  7. }
  8. .item {
  9.   box-sizing: border-box;
  10.   background: #eee;
  11.   flex: 0 0 20%;
  12.   height: 40px;
  13.   margin: 5px;
  14. }

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

总结

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

云服务器 GPU云服务器 flex布局 flex flex40 flex 教程

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

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

相关文章

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

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

    daydream 评论0 收藏0

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

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

    bbbbbb 评论0 收藏0

  • CSS Flex 布局：用 Flex 来实现圣杯布局

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

    Olivia 评论0 收藏0

  • HTML-CSS

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

    xiaokai 评论0 收藏0

发表评论

登陆后可评论

0条评论

rickchen

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<