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: flex
display: 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

评论