通CSS布局已经快满足不了这乏味的开发生活了。

无趣的页面更是有种半死不活的忧伤！

是时候来点不一样的了！

整个好活儿，我们来看10种不一样的布局方式！

01. place-items: center——Super 大居中

居中，永远是CSS领域中最大的谜团， 但是今天山人有一妙计，使用 place-items: center 。从此单行居中So easy！妈的，再也不用担心我的居中了！

1.指定 grid 作为 display 方法

2.在同一个元素写入 place-items: center。

3.place-items 是同时设置 align-items 和 justify-items 的快速方法。align-items 和 justify-items 也都设置了 center。

.parent {
display: grid;
place-items: center;
}

02. flex: <grow> <shrink> <baseWidth>——搞懂摊煎饼布局

营销网站经常能看见这样的布局，比如，图片中一行3个项目， 项目中可能是文本，图像等，我们希望他可以在设备上丝滑的叠放拓展。

当我们拿出 Flexbox 来应对的时候，就不需要在屏幕尺寸发生变化时，通过媒体查询来调整这些元素的位置。

flex 简写代表：flex: <flex-grow> <flex-shrink> <flex-basis> 。如果您想让您的框填充到它们的 <flex-basis> 大小，缩小到更小的尺寸，但不拉伸以填充任何额外的空间，请写入：flex: 0 1 <flex-basis> 。在这种情况下，您的 <flex-basis> 是 150px，所以应该是这样：

.parent {
display: flex;
}

.child {
flex: 0 1 150px;
}

如果您确实希望框在换到下一行时拉伸并填充空间，请将 <flex-grow> 设置为 1 ，所以应该是这样：

.parent {
display: flex;
}

.child {
flex: 1 1 150px;
}

现在，当您增加或减少屏幕尺寸时，这些 flex 项目会缩小和增长。

03. grid-template-columns:

minmax(<min>, <max>) …)——侧边栏：

图片中的网格布局，就用到了 minmax 函数。我们在这里做的是将侧边栏最小设置为 150px ，但在更大的屏幕上，让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%，直到 25% 变得小于 150px 。

将以下值添加为 grid-template-columns 的值：minmax(150px, 25%) 1fr 。

在第一列（在这种情况下，侧边栏）的项目其 minmax 为 150px（在25% ），

第二列项目（这里指 main 部分）占据其余的空间作为单一的 1fr 轨道。

.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}

04.grid-template-rows: auto 1fr auto ——煎饼堆栈布局

这种布局通常用于网站和应用程序，跨多个移动应用程序（页脚通常是工具栏）和网站（单页应用程序通常使用这种全局布局）。

向组件添加 display: grid 将为您提供一个单列网格，但是主区域的高度将仅与页脚下方的内容一样高。

使页脚粘在底部，请添加：

.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}

1fr页眉和页脚内容设置为自动采用其子项的大小，并将剩余空间 ( 1fr ) 应用于主区域，而auto调整大小的行将采用其子项的最小内容的大小，以便该内容大小增加，行本身将增长以进行调整。

05. grid-template: auto 1fr auto / auto 1fr auto——经典圣杯布局

对于经典的圣杯布局，有页眉、页脚、左侧边栏、右侧边栏和主要内容。类似于以前的布局，但现在有侧边栏！

要使用一行代码编写整个网格，请使用 grid-template 属性。这使您可以同时设置行和列。

属性和值对为：grid-template: auto 1fr auto / auto 1fr auto 。第一个和第二个以空格分隔的列表之间的斜线是行和列之间的分隔符。

.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}

与上一个示例一样，页眉和页脚具有自动调整大小的内容，这里的左侧和右侧边栏会根据其子项的固有大小自动调整大小。但是，这次是水平尺寸（宽度）而不是垂直尺寸（高度）。

06. grid-template-columns: repeat(12, 1fr)——12 跨网格

接下来我们有另一个经典布局：12 跨网格。您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 将为每个 1fr 提供 12 列。

.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
grid-column: 1 / 13;
}

现在您有一个 12 列的轨道网格，我们可以将子项放在网格上。一种方法是使用网格线放置它们。例如， grid-column: 1 / 13 将跨越从第一到最后一行（第 13 行）并跨越 12 列。grid-column: 1 / 5; 将跨越前四个列。

另一种方法是使用 span 关键字。使用 span ，您可以设置起始线，然后设置从该起点跨越的列数。在这种情况下，grid-column: 1 / span 12 将等效于 grid-column: 1 / 13 ，而 grid-column: 2 / span 6 将等效于 grid-column: 2 / 8 。

.child-span-12 {
grid-column: 1 / span 12;
}

07. grid-template-columns(auto-fit, minmax(<base>, 1fr))——RAM(Repeat, Auto, MinMax)

对于这第七个示例，结合您已经了解的一些概念来创建具有自动放置且灵活的子项的响应式布局。漂亮整齐。这里要记住的关键点是 repeat 、 auto-(fit|fill) 和 minmax()' ，可以记住它们的首字母缩写词 RAM。

总之，应是这样：

.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

您再次使用 repeat ，但这次使用 auto-fit 关键字而不是显式数值。这可以自动放置这些子元素。这些子元素的基本最小值为 150px ，最大值为 1fr ，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当它们达到 150px 宽度时，它们将开始流到同一条线上。

使用 auto-fit ，当它们的水平尺寸超过 150px 时，框将拉伸以填充整个剩余空间。但是，如果您将其更改为 auto-fill ，则当超出 minmax 函数中的基本大小时，它们将不会拉伸：

.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

08. 排列布局：justify-content: space-between

对于下一个布局，这里要主要说明的是 justify-content: space-between ，它将第一个和最后一个子元素放置在其边界框的边缘，其余空间均匀分布在元素之间。对于这些卡片，它们被放置在 Flexbox 显示模式中，使用 flex-direction: column 将方向设置为 column。

这会将标题、描述和图像块放在父卡片内的垂直列中。然后，应用 justify-content: space-between 将第一个（标题）和最后一个（图像块）元素锚定到 flexbox 的边缘，并且它们之间的描述性文本以相等的间距放置到每个端点。

.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}

09. clamp(<min>, <actual>, <max>)——保持风格

这里，我们介绍一些只有少数浏览器支持的技术，但这些技术对布局和响应式 UI 设计有非常令人兴奋的影响。在本演示中，您将使用固定工具设置宽度，如下所示：width: clamp(<min>, <actual>, <max>) 。

这将设置绝对最小和最大尺寸以及实际尺寸。有了值，应该这样：

.parent {
width: clamp(23ch, 60%, 46ch);
}

这里的最小尺寸是 23ch 或 23 个字符单元，最大尺寸是 46ch ，46 个字符。字符宽度单位基于元素的字体大小（特别是 0 字形的宽度）。“实际”尺寸为 50%，代表此元素父宽度的 50%。

在这里， clamp() 函数所做的是使该元素保持 50% 的宽度，直到 50% 大于 46ch （在较宽的视口上）或小于 23ch （在较小的视口上）。您可以看到，当我拉伸和收缩父尺寸时，这张卡片的宽度会增加到其最大限制点并减小到其限制最小点。然后它保持在父级的中心，因为我们已经应用了其他的属性来将它居中。这可以实现更清晰的布局，因为文本不会太宽（超过 46ch ）或太窄（小于 23ch ）。

这也是实现响应式排版的好方法。例如，您可以编写：font-size: clamp(1.5rem, 20vw, 3rem) 。在这种情况下，标题的字体大小将始终保持在 1.5rem 和 3rem 之间，但会根据 20vw 实际值增大和缩小以适应视口的宽度。

这是一种很好的技术，可以通过最小和最大尺寸值确保易读性，但请记住，并非所有现代浏览器都支持它，因此请确保您有回退措施并进行测试。

10.aspect-ratio: <width> / <height>——保持宽高比

最后要介绍的这一布局工具目前还没有任何稳定的浏览器版本，最近在 Chromium 84 中被引入 Chrome Canary，Firefox 正在积极努力实现这一点。使用 aspect-ratio 属性，当我调整卡片大小时，绿色视觉块保持 16 x 9 的宽高比。我们通过 aspect-ratio: 16 / 9 保持此宽高比。

.video {
aspect-ratio: 16 / 9;
}

要在没有此属性的情况下保持 16 x 9 的宽高比，需要使用 padding-top hack 并为其提供 56.25% 的 padding 以设置顶宽比。我们很快就会有一个属性来避免黑客攻击和计算百分比的需要。可以使用 1 / 1 的比例制作正方形，使用 2 / 1 制作 2:1 比例。可以设置任何图像缩放比例。

Web前端开发中，页面布局是构建网站的基础之一。随着HTML5和CSS3的发展，Flexbox和Grid成为现代网页设计中不可或缺的工具。这两种布局模式为开发者提供了更加灵活和强大的布局能力，特别是在响应式设计方面表现卓越。本文将详细介绍Flexbox和Grid布局，并通过实例来展示其使用方法。

Flexbox布局

Flexbox（Flexible Box）布局提供了一种更有效的方式来分配容器中项目的空间，特别是当项目大小未知或动态变化时。它是一种一维布局方法，意味着我们可以在一个方向上（水平或垂直）进行空间分配。

Flexbox基本概念

要使用Flexbox，首先需要将一个容器的display属性设置为flex。

.flex-container {
  display: flex;
}

容器内的直接子元素自动成为flex项目，并根据需要沿主轴（默认为水平轴）或交叉轴（垂直于主轴）对齐。

Flexbox布局实例：简单的导航栏

<nav class="flex-nav">
  <a href="#">首页</a>
  <a href="#">产品</a>
  <a href="#">服务</a>
  <a href="#">关于我们</a>
  <a href="#">联系我们</a>
</nav>

.flex-nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 50px;
  background-color: #333;
}

.flex-nav a {
  color: white;
  text-decoration: none;
  padding: 10px;
}

在这个例子中，导航栏的链接会均匀地分布在整个容器中，justify-content: space-around;确保了每个链接之间的空间是相等的。

Grid布局

CSS Grid布局是一个二维布局系统，允许我们在行和列上同时进行布局。它适合于构建复杂的网页布局，特别是当你需要在多个方向上对项目进行精确控制时。

Grid基本概念

使用Grid布局，首先需要将一个容器的display属性设置为grid。

.grid-container {
  display: grid;
}

然后，可以通过grid-template-columns和grid-template-rows属性来定义列和行的大小。

Grid布局实例：产品特性区块

<div class="grid-features">
  <div class="feature">特性一</div>
  <div class="feature">特性二</div>
  <div class="feature">特性三</div>
  <div class="feature">特性四</div>
</div>

.grid-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
  padding: 20px;
}

.feature {
  background-color: #f7f7f7;
  padding: 20px;
  text-align: center;
}

在这个例子中，我们创建了一个两列的特性区块，grid-gap属性添加了项目之间的间隔。

结合Flexbox和Grid

在实际的网页设计中，Flexbox和Grid可以结合使用，以达到更好的布局效果。通常，Flexbox适合于组件和小规模布局的对齐问题，而Grid适合于大规模的页面结构布局。

结合使用实例：博客页面布局

<div class="blog-layout">
  <header>博客头部</header>
  <aside>侧边栏</aside>
  <main>文章内容</main>
  <footer>博客底部</footer>
</div>

.blog-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  height: 100vh;
}

header, footer {
  grid-column: 1 / -1; /* 跨越所有列 */
  background-color: #333;
  color: white;
  padding: 15px;
  text-align: center;
}

aside {
  background-color: #f7f7f7;
  padding: 15px;
}

main {
  background-color: #fff;
  padding: 15px;
}

在这个博客页面布局中，头部和底部跨越所有列，侧边栏和文章内容则分别占据剩余的空间。这种布局方式使得页面结构清晰，同时也易于响应不同的屏幕尺寸。

实例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox and Grid Layout Example</title>
<style>
  body {
    margin: 0;
    font-family: Arial, sans-serif;
  }

  .container {
    display: grid;
    grid-template-areas:
      'header header header'
      'nav content content'
      'footer footer footer';
    grid-template-columns: 200px 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    height: 100vh;
  }

  header {
    grid-area: header;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
  }

  nav {
    grid-area: nav;
    background: #eee;
    padding: 10px;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
  }

  .nav-links a {
    text-decoration: none;
    padding: 10px;
    color: #333;
    border-bottom: 1px solid #ccc;
  }

  .nav-links a:hover {
    background-color: #ddd;
  }

  main {
    grid-area: content;
    padding: 20px;
    overflow-y: auto;
  }

  footer {
    grid-area: footer;
    background: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>
<div class="container">
  <header>网站标题</header>
  <nav>
    <div class="nav-links">
      <a href="#">首页</a>
      <a href="#">产品</a>
      <a href="#">服务</a>
      <a href="#">关于我们</a>
      <a href="#">联系我们</a>
    </div>
  </nav>
  <main>
    <h1>主要内容</h1>
    <p>这里是页面的主要内容，可以包含文字、图片、视频等多种类型的媒体。</p>
    <!-- 更多内容 -->
  </main>
  <footer>版权所有 ? 2023</footer>
</div>
</body>
</html>

在这个例子中：

• .container 类定义了整个页面的Grid布局结构，其中包含了头部（header）、侧边导航（nav）、主内容区（content）和底部（footer）。
• grid-template-areas 属性定义了各个区域的名称和位置。
• grid-template-columns 和 grid-template-rows 属性定义了列和行的大小。
• nav 元素中的 .nav-links 类使用Flexbox布局创建了一个垂直的导航链接列表。
• main 元素代表页面的主要内容区域，可以根据需要添加更多的内容。

这个布局示例提供了一个基本的框架，可以根据具体需求进行扩展和定制。

结语

Flexbox和Grid布局是前端工程师必备的技能。通过灵活运用这两种布局方式，可以创建出既美观又功能强大的响应式网站。随着实践的积累，你将能够更加熟练地掌握这些工具，打造出更加完善的用户体验。

、摘 要

（OF作品展示）

OF之前介绍了用python实现数据可视化、数据分析及一些小项目，但基本都是后端的知识。想要做一个好看的小系统，我们还要学一些前端的知识，今天OF将讲解如何用pycharm（全栈开发不错的工具）做一张好看的网页，以后我们就可以自己开发网页/网站放到互联网上。

主要内容：网页前端布局

适用人群：Python初学者，前端初学者

准备软件：pycharm

二、pycharm操作说明

1. 创建项目

1) 下载完成pycharm, 点击file-New Project...

2) 按下图步骤创建一个项目，目前我们选择Pure python即可，以后我们可以学习用Django/flask等框架来做完整的系统

2. 创建HTML文件

1）在创建的项目空白处鼠标右键-New-HTML File

2）输入英文的网页名字，尽量不要输入中文/特殊字符

3. HTML格式说明

当双击打开我们创建后的HTML文件，大家会看到下面的界面

三、网页设计

1. 草图绘制

在开始开发网页前，我们需要自己设计下想要把网页做成什么样，为了节省成本OF都是自己设计的页面样式，可以手绘，也可以在PPT上画。

2. css名字定义

我们先学习一个比较简单的布局如下图，大家可以看到下图已经画出了我们需要添加的内容，要注意的地方是比如Taylor的图片和文字一定要用<div class=bord>框住，否则Taylor图片与文字将会是左右的关系，而不是上下

四、网页开发

1. body部分

根据上述的css名字定义，先填充<body>内的代码，那么我们就完成一半的工作了，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

2. 网页测试

1）鼠标移到代码处，在右上角我们会看到一排浏览器，我们点击其中一个运行

2）目前看到的网页内容从上到下显示

3. head部分

首先我们简要了解下flex布局，大家可以看到下图中#main的style样式中display:flex，在body部分将3个颜色内容框在<div id="main">中，运行结果是3个颜色的内容横向展示了，而不是上下

1）那么我们先从“人物介绍”的布局开始，“人物介绍”居中展现（用flex中justify-content:center），而且下面有一条黑线，OF准备用border样式来实现，所以在<div id=intro>里另加了个<div class=peo>，代码如下：

(注：style中的#main对应body中的id=main, .main对应class=main)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }
        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

运行结果：

2）图片部分是3个<div class=bord>横向展示，所以要在框住它们的<div id=pic1>样式中设置flex布局，在<style>里加入以下代码：

#pic1 {
    display: -webkit-flex; /* Safari */
    display: flex;
    justify-content: center;
}

运行结果：

3）图片之间靠太近，图片大小不一致，文字没居中，我们在<style>里加入以下代码：

.bord{
    padding: 1rem 2rem;
}


.img {
    border: 0.2rem solid #e3e3e3;
    max-width: 15rem;
    height: 22rem;
}


.word {
    text-align: center;
}

运行结果：

五、总 结

今天我们学会了flex布局，今后所有的网页排版都可以实现了，祝愿大家都有所收获，完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #intro {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;


        }

        .peo {
            max-width: 10rem;
            border-bottom: 0.2rem solid #000000;
            font-family: sans-serif;
            font-size: 1.5rem;
            color: #0070C0;
            line-height: 3rem;
        }

        #pic1 {
            display: -webkit-flex; /* Safari */
            display: flex;
            justify-content: center;
        }

        .bord{
            padding: 1rem 2rem;
        }

        .img {
            border: 0.2rem solid #e3e3e3;
            max-width: 15rem;
            height: 22rem;
        }

        .word {
            text-align: center;
        }
    </style>
</head>
<body>
<div id="intro">
    <p class="peo">人物介绍</p>
</div>
<div id="pic1">
    <div class="bord">
        <img class="img" src="pic/Taylor.png"/>
        <p class="word">Taylor</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/yan.png"/>
        <p class="word">东</p>
    </div>
    <div class="bord">
        <img class="img" src="pic/song.png"/>
        <p class="word">乔</p>
    </div>
</div>
</body>
</html>

今天的知识比较基础但非常实用，每天学会一个小技能，积少成多，以后就能成为大神。如果大家对网页上的实现有什么不懂的，尽请留言，OF一定会一一解答的。