如何使用Flexbox和CSS Grid,实现高效布局

  • 时间:
  • 浏览:1
  • 来源:神彩排列三_彩神排列三官方

通过 display: flex; 自动创建另一一俩个全宽的 header(header 默认请况下是块级元素)。通过你一种生活声明,导航元素的放置会变得很容易。

下面是时需创建的内容: 

最后,我们我们我们通过组合 Flexbox 和 CSS Grid 来创建更复杂的布局。

主内容区域和侧边栏的大小设置非常重要,愿因重要的信息后要 这里展示。主内容区域应该是侧边栏大小的三倍,使用 Flexbox 很容易实现这点。

规划对于布局的实现来说,十分重要。

总的来说,Flexbox 在创建你一种生活简单的布局时,十分高效。尤其在控制列表元素样式和设置导航与按钮之间的间距方面,不要怎样有用。

同去,CSS Grid 布局也为网页设计行业带来了很大的便利。我觉得 CSS Grid 布局未被广泛采用,可是我我 浏览器逐渐开使英语 增加对 CSS Grid 布局的支持。

grid-template-areas:

导航的位置按照以下办法设置:

你一种生活布局时需在行和列另一一俩个方向上保持一致,可是我我使用 CSS Grid 实现整体布局十分有效。

        "footer footer";

使用 CSS Grid 布局时,在 container 中设置 display: grid; 非常重要。此处声明 grid-template-columns,是为了确保页面的整体实物。这里 grid-template-column 已将侧边栏和主内容区域大小设置为 1fr 和 3fr。fr 是网格的分数单位。

基本 HTML 实物

【报表福利大放送】80余套报表模板免费下载

接下来看看代码要怎样一步步实现。首先 display: grid; 是基本设置,其次内容块之间的间距,时需通过 grid-column-gap 和 grid-row-gap 实现。

转载请注明出自:红心红心红心红心葡萄 城控件

有一件事要注意:哪几个名字时需“连接”到样式上。可是我我时需在 header block 中,去掉 grid-area: header;。

        "header header"

Angular vs React 最全面深入对比

Flexbox 非常适合放置 header 元素。基本的 header 布局时需设置 justify-content: space-between。

 

完成网格布局的构建但是 ,微调内容可是我我下一步。

要放置按钮,我们我们我们只时需将 justify-self 设置为 end。

CSS Grid 的方便之处在于,时需指定模板区域,这也使得定义布局变得非常直观。采取你一种生活办法,网格上的区域时需命名并引用位置项。对于你一种生活基本布局,我们我们我们时需命名八个项目:

CSS 浮动属性突然是网站上排列元素的主要办法之一,可是我我 当实现复杂布局时,你一种生活办法不突然没法理想。幸运的是,在现代网页设计时代,使用 Flexbox 和 CSS Grid 来对齐元素,变得相对容易起来。

基本的布局如下图所示:

下图是含高了“额外”文本和按钮的另一一俩个区域。Flexbox 时需轻松设置三列的深层。

接下来,时需调整 header 容器中的 fr 单元。将 grid-template-columns 设置为 1fr 和 1fr。从前 header 中后要 另一一俩个相同大小的列,放置导航项和按钮会很大概。

 

将所需的元素排列在另一一俩个方向上,愿因所有元素都处在同一横向维度,通常Flexbox是实现你一种生活布局的更好选折 。此外,Flexbox 时需动态调整元素。使用 Flexbox,时需将所有元素连成一根直线,这也确保了所有元素都具有相同的深层。

当前侧边栏处在左侧,主区域内容处在右侧,愿因时需,也时需轻松更改顺序。

原文链接:https://getflywheel.com/layout/combine-flexbox-and-css-grids-for-layouts-how-to/

在导航中,使用 align-items: baseline; 都都后要 实现所有导航项目与文本基线的对齐,从前也使得导航栏看起来更加统一。

为了测试带宽,接下来使用 CSS Grid 创建相同的基本布局。 

上边的 CSS Grid 布局示例中,时需在导航栏设置 justify-self:start;,在按钮设置 justify-self: end;,可是我我 愿因使用 Flexbox,导航的间距会变得很容易设置。

代码如下:

相关阅读:

最流行的八个前端框架对比

我们我们我们从另一一俩个很简单且熟悉的布局类型开使英语 ,包括标题,侧边栏,主要内容和页脚等每段。通过从前另一一俩个简单的布局,来帮助我们我们我们快速找到各种元素的布局办法。

我们我们我们按照顺序在 grid container 中定义哪几个区域,就像绘制它们一样。

 

我觉得 Flexbox 和 CSS Grid 时需完成之类的布局,可是我我 本次,我们我们我们学习的是要怎样组合使用你一种生活另一一俩个工具,而后要 只选折 其中的另一一俩个。在不久的将来,当 CSS Grid 布局获得完全的浏览器支持时,设计人员就都都后要 利用每个 CSS 组合的优势,来创建最有效和最有趣的布局设计。

接下来,将侧边栏和主内容区域使用另一一俩个 wrapper 含高起来。具有 .wrapper 类的 div,也时需设置 display: flex; 可是我我 flex 方向与上述不同。这是愿因侧边栏和主内容区域彼此相邻而后要 堆叠。

也时需使用简写,起始值和开使英语 值处在同一行上,并用斜杠分隔。就像从前:

        "sidebar main"

要完成你一种生活基本布局, Flexbox 时需完成的主要任务包括以下方面:

以上的布局设计中,使用了 CSS Grid 来进行整体布局(以及设计中的非线性每段)。对于网格内容区域的设计,使用 Flexbox 进行样式的排序和微调会更容易实现。

我们我们我们从外到内,逐层开使英语 设计,首先将 display: flex; 去掉 到 container,这也是所有 Flexbox 布局的第一步。接着,将 flex-direction 设置为 column,确保所有每段彼此相对。

导航栏的左侧有另一一俩个 logo 和另一一俩个菜单项,右侧有另一一俩个登录按钮。导航处在 header 中,通过 justify-content: space-between; 时需实现导航和按钮之间的自动间隔。

HTML 实物与 Flexbox 示例中的相同,但 CSS 与创建网格布局完全不同。

Header 每段横跨所有的列。

2017年前端框架、类库、工具大比拼

使用 Flexbox 时需使元素对齐变得容易,可是我我 Flexbox 愿因被广泛使用了。