CSS弹性框和网格可用于创建网站布局和在网页上定位项目。下面是一个概述。
CSS弹性框和网格是针对用户界面设计优化的两种不同的布局模型。Flexbox（也称为柔性框布局）处理一维布局，您可以在其中水平或垂直布局和对齐元素。网格（也称为网格布局）更进一步，允许您构建二维布局，您可以在其中水平和垂直布局和对齐元素。文章源自你的网络首码项目网-https://www.youranweb.com/267.html
下面是一些示例，用于演示弹性框和网格布局的概念。文章源自你的网络首码项目网-https://www.youranweb.com/267.html
弹性框文章源自你的网络首码项目网-https://www.youranweb.com/267.html
Flexbox包含许多属性，可用于定义柔性框以及其中项目的行为。文章源自你的网络首码项目网-https://www.youranweb.com/267.html
首先，通过应用或对flex容器声明它。这将为其内容建立新的弹性格式设置上下文。display: flexdisplay: inline-flex文章源自你的网络首码项目网-https://www.youranweb.com/267.html
拥有弹性容器后，可以将各种弹性属性应用于其子项。flex属性是主要flex属性的简写，如下所示：文章源自你的网络首码项目网-https://www.youranweb.com/267.html
<!DOCTYPE html>
<title>Example</title>
<style>
.outer-container {
font: 16px sans-serif;
background: gold;
color: white;
height: 200px;
display: flex;
}
.box {
padding: 10px;
flex: 1 0 auto;
}
.larger {
background: yellowgreen;
flex: 3 0 auto;
}
</style>
<div class="outer-container">
<div class="box">Box</div>
<div class="box larger">Larger Box</div>
<div class="box">Box</div>
<div class="box larger">Larger Box</div>
</div>在这里，我们指定正常框“增长因子”是，较大的框是。增长因子指定弹性项相对于弹性容器中其余弹性项的增长量。13文章源自你的网络首码项目网-https://www.youranweb.com/267.html
查看弹性框教程，了解有关弹性框可以执行的操作的更多示例。文章源自你的网络首码项目网-https://www.youranweb.com/267.html
网格布局
网格的工作方式类似于flexbox，因为您声明了一个网格容器，该容器为其内容建立新的网格格式设置上下文。您可以将网格定义为一组数字或行和列，以及它们的大小等。文章源自你的网络首码项目网-https://www.youranweb.com/267.html
通过使用或定义网格容器。display:griddisplay:inline-grid文章源自你的网络首码项目网-https://www.youranweb.com/267.html
网格容器的任何直接子项都是网格项，您可以完全控制这些项的放置位置、它们跨越的行数或列数等。文章源自你的网络首码项目网-https://www.youranweb.com/267.html
下面是一个示例：文章源自你的网络首码项目网-https://www.youranweb.com/267.html
<!doctype html>
<title>Example</title>
<style>
body {
display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
height: 100vh;
margin: 0;
}
header, footer, article, nav, div {
padding: 20px;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
</style>
<body>
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>在这个例子中，我们使用一种“ASCII艺术”来定义一个三列的网站布局。这只是您可以使用网格布局执行的众多操作之一。我写了一个专门的CSS网格教程，更详细地介绍了网格，所以如果你认为你喜欢网格可以做什么，请查看它。文章源自你的网络首码项目网-https://www.youranweb.com/267.html 文章源自你的网络首码项目网-https://www.youranweb.com/267.html
评论