我尝试使用flex-grow来让body部分填满屏幕，让nav粘在底部，但我不知道应该将它们应用到哪些元素上。有人能告诉我应该在哪个元素上吗？
我试着用flex-col在_app.js flex中的导航上方制作div，然后将flex-grow应用到categories/[slug].js的body部分，但没有成功。
import Head from "next/head";
import Link from "next/link";
import Skeleton from "react-loading-skeleton";
import { CURSORY_ARTICLES_BY_CATEGORY_QUERY } from "../../queries/articles";
import { useRouter } from 'next/router';
import { useQuery } from "@apollo/react-hooks";
const Main = () => {
const router = useRouter()
const { slug } = router.query;
const { data, loading, error } = useQuery(CURSORY_ARTICLES_BY_CATEGORY_QUERY, {
variables: { category: slug }
});
return (
<div>
<Head>
<link
rel="preload"
href='../public/fonts/Apple.ttf'
as="font"
crossOrigin=""
/>
</Head>
<div className="max-w-full flex container bg-gray-terminal bg-image justify-around">
<ul className="flex flex-col font-apple">
{
loading ? <Skeleton count={6} width={512} height={256}></Skeleton> :
error ? <p>Error: {JSON.stringify(error)}</p> :
data.articles.map(
(article) => {
return (
<Link href={`/articles/${article.slug}`}>
<li key={article.slug} className="rounded gird grid-cols-4 justify-between cursor-pointer my-8 mx-2 md:mx-4 lg:mx-8 text-green-terminal hover:text-white border-4 border-green-terminal hover:border-white shadow-2xl bg-gray-terminal">
<h1 className="mx-4 py-4 sm:py-2 w-1/3 col-span-1 font-apple">{article.title}</h1>
<p className="mx-4 text-sm py-4 sm:py-2 w-2/3 col-span-3 font-apple">{article.description}</p>
</li>
</Link>
);
}
)
}
</ul>
</div>
</div>
);
}
export default function SelectedCategory() {
return (
<Main />
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>一个二个一个一个
import Link from 'next/link';
export default function Footer() {
return (
<footer className="max-w-full container flex flex-col items-center bg-black font-apple">
<Link href="https://twitter.com/Unenunciate">
<svg className="my-4 cursor-pointer text-green-terminal fill-current hover:text-white" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
</Link>
<Link href="/contact">
<div className="tracking-wider text-md mb-4 text-green-terminal hover:text-white border-green-terminal hover:border-white hover:shadow-lg">
Contact
</div>
</Link>
<div className="text-green-terminal text-sm mb-2">
Copyright Ⓒ 2021
</div>
</footer>
);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>import CATEGORIES_QUERY from "../queries/categories";
import Link from 'next/link';
import Skeleton from "react-loading-skeleton";
import { useQuery } from "@apollo/react-hooks";
export default function Nav() {
const { data, loading, error } = useQuery(CATEGORIES_QUERY, {
variables: { slug: "categories" }
});
return (
<div className="bg-black max-w sticky">
<div>
<nav className="flex justify-between container mx-auto py-4">
<ul>
<li className="group flex flex-row mx-2 text-green-terminal group-hover:text-white border-b-4 border-radius border-green-terminal hover:border-white hover:shadow-lg">
<Link href="/">
<div className="flex flex-row cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" className="group-hover:text-white text-green-terminal fill-current h-5 w-5 -translate-y-2 icon " viewBox="0 0 20 20" fill="#fff">
<path fill-rule="evenodd" d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3.293 1.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 01-1.414-1.414L7.586 10 5.293 7.707a1 1 0 010-1.414zM11 12a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" />
</svg>
<span className="group-hover:text-white font-apple tracking-widest">
Uenunciate
</span>
</div>
</Link>
</li>
</ul>
<ul>
</ul>
<div className="flex justify-between">
<ul className="flex flex-wrap mx-2 md:mx-4 lg:mx-8">
{
loading ? <Skeleton count={2} width={12} height={12}></Skeleton>:
error ? <p>Error: {JSON.stringify(error)}</p> :
data.categories.map(
(category) => {
return (
<li key={category.slug} className="mx-2 md:mx-4 lg:mx-8 font-apple tracking-widest text-green-terminal hover:text-white border-b-4 border-green-terminal hover:border-white hover:shadow-lg ">
<Link href={`/categories/${category.slug}`}>
{category.name}
</Link>
</li>
);
}
)
}
</ul>
</div>
</nav>
</div>
</div>
)
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
1条答案
按热度按时间3pvhb19x1#
您可能只能在main内容元素上应用align-items: stretch;（tw class: items-stretch）。
然而，你可能需要更深入地设计你的body、：root（html）和#__next元素。下面是一个带有Next顺风版本的通用SASS。
Here is a codesandbox example-它没有使用tailwind类，因为我不能让它与codesandbox中的next 10一起工作。它使用的是vanilla CSS，但你可以理解。
给你个建议
设置你的svg填充为“currentColor”，它将允许你很容易地用文本颜色类给它们着色。
你的下一个/链接需要 Package 在一个“一个”per the docs如果你是添加文本或添加额外的 prop 以外的任何东西。
Exenal链接不应该使用next/link，而应该使用rel=“nofollow noreferrer”来增强用户的安全性。
该示例还包括上述建议。