flex布局实例：网格布局

最新推荐文章于 2024-06-01 09:49:11 发布

原创最新推荐文章于 2024-06-01 09:49:11 发布 · 837 阅读

0 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

17 篇文章

订阅专栏

前端项目

9 篇文章

订阅专栏

本文详细介绍了如何使用Flex布局来构建一个灵活、响应式的网格系统。通过理解Flexbox的基本概念，如flex容器、flex项、flex-direction等属性，我们可以创建出适应不同屏幕尺寸的布局。实例中展示了在不同设备上网格自动调整列数，实现流畅的视觉效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex实例之网格布局</title>
  <style>
    pre {
      font-size: 16px;
    }
    .grid {
      display: flex;
    }
    .grid-cell {
      margin: 20px;

      height: 100px;
      background-color: antiquewhite;

      flex: auto;
    }

    .grid .u-lof3 {
      flex: 0 0 33.3333%;
    }

    .grid .u-lof4 {
      flex: 0 0 25%;
    }
  </style>
</head>
<body>
<h2>flex实例之网格布局</h2>
<pre>参考：<a href="http://www.ruanyifeng.com/blog/2015/07/flex-examples.html" target="_blank">flex实例</a></pre>
<h3>1.基本网格布局</h3>
<p>最简单的网格布局就是平均分配，需要设置项目的自动缩放</p>
<pre>
  flex属性是
  flex-grow （默认0，不放大）
  flex-shrink （默认1，缩小）
  flex-basis （默认auto，占据主轴空间自动）的简写
  该属性有两个快捷键：auto即1(1 1 auto,可放大、缩小、自动),none即0(0 0 auto，不放大、不缩小、自动)
</pre>
<div class="grid"> <!--grid是网格的意思-->
  <div class="grid-cell">1/2</div>
  <div class="grid-cell">1/2</div>
</div>
<div class="grid">
  <div class="grid-cell">1/3</div>
  <div class="grid-cell">1/3</div>
  <div class="grid-cell">1/3</div>
</div>

<h3>2.百分比布局</h3>
<p>某个网格的宽度固定百分比，其余网格平均分配剩余的空间</p>
<div class="grid">
  <div class="grid-cell u-lof4">1/4</div>
  <div class="grid-cell">auto</div>
  <div class="grid-cell u-lof3">1/3</div>
</div>
</body>
</html>