Medium 主页：弹性盒布局方法总结Medium 为国外最大的博客社区之一，其主页设计风格简约现代，采用了经典弹性盒F

前言

Medium 为国外最大的博客社区之一，其主页设计风格简约现代，采用了经典弹性盒Flexbox布局，本文将介绍Tailwind CSS 弹性盒布局通用参数以及主页样式布局的基本技术实现步骤，并提供代码参考。

效果展示

技术栈

React, Next.js, Tailwind CSS

主页主容器

技术步骤

打开 /index.tsx，删除 main, footer部分
设置主页主容器、头部参数
添加导航条组件

参数设置

设置 max-w-7xl (max-width: 80rem //1280px)：规定总容器最大宽度
运用 mx-auto (margin-left: auto, margin-right: auto)：将容器内各部分居中

import Head from "next/head";
import Link from "next/link";
import Header from "../components/Header";

export default function Home() {
	return (
		<div className="max-w-7xl mx-auto">
			<Head>
				<title>Medium Blog</title>
				<link rel="icon" href="/favicon.ico" />
			</Head>

			{/* Include the Header Component */}
			<Header />
    </div>
}

弹性盒：两部分平行布局——通用参数

主容器：弹性盒

flex (display: flex)
justify-between (justify-items: space-between)

内部弹性盒：项目居中与空间

items-center (align-items: center)
space-x-5 (margin-left)

顶部导航条组件——Header

技术步骤：

根目录创建 /component 文件夹 > Header.tsx
运用 Next.js- Link 标签组件，实现页面预加载：pre-fetch data from the linked page by default

样式步骤

主容器：运用弹性盒平行布局通用参数
左侧按钮容器：inline-flex
LOGO：object-contain (object-fit: contain) ——让图片适应容器大小

import React from "react";
import Link from "next/link";

function Header() {
	return (
		<header className="flex justify-between p-5 max-w-7xl mx-auto">
			<div className="flex items-center space-x-5">
        
        {/* Logo */}
				<Link href="/">
					<img
						src="https://links.papareact.com/yvf"
						alt=""
						className="w-44 object-contain cursor-pointer"
					/>
				</Link>
				<div className="hidden md:inline-flex items-center space-x-5">
					<h3>About</h3>
					<h3>Contact</h3>
					<h3 className="text-white bg-green-600 px-4 py-1 rounded-full">
						Follow
					</h3>
				</div>
			</div>

			<div className="flex items-center space-x-5 text-green-600">
				<h3>Sign In</h3>
				<h3 className="border px-4 py-1 rounded-full border-green-600">
					Get Started
				</h3>
			</div>
		</header>
	);
}

export default Header;

主图部分——Banner

样式步骤

运用弹性盒平行布局通用参数
调整容器间空间参数：space-y-5 (margin-top: 1.25rem; /* 20px */)

{/* Banner */}
<div className="flex justify-between items-center bg-yellow-400 border-y border-black py-10 lg:py-0">
  <div className="px-10 space-y-5">
    <h1 className="text-6xl max-w-xl font-serif">
      <span className="underline decoration-black decoration-4">
        Medium
      </span>{" "}
      is a place to write, read and connect
    </h1>
    <h2>
      It's easy and free to post your thinking on any topic and connect
      with millions of readers.
    </h2>
  </div>
  <div>
    <img
      className="hidden md:inline-flex h-32 lg:h-full"
      src="https://accountabilitylab.org/wp-content/uploads/2020/03/Medium-logo.png"
      alt=""
    />
  </div>
</div>