作者:飛373227470 | 来源:互联网 | 2021-09-26 00:52
在CSS3没有普及的时候,创建一个网站header是一项既可怕又困难的任务?。那时,Flexbox还是个新东西,我们不得不使用老方法,比如float和clearfix技术。今天,情况完全不同了,Flexbox得到了广泛的支持。
不管 Header 的视觉设计如何,关键元素都是logo
和导航
。
Flexbox
当 flexbox 应用于 Header 元素时,它将使所有子项目在同一行中。然后,你所需要做的就是应用justify-content
来分配它们之间的间距。
html
Brand
css
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
很简单,对吧?对于这样的用例,是的,可能会比这更复杂。
Header Wrapper
在上面的 lago
和 nav
外没有包含一层 wrapper
,这在大屏幕可能会出现问题。
从上可以看到第一个Header
太宽了,因为它没有内部 wrapper
相比第一个,第二个看起来好多了。所以,我们可以对 HTML 进行如下调整。
flexbox
应该移动到.site-header__wrapper
元素中。
.site-header__wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
使用 flex-wrap
当屏幕很小的时候,可以水平滚动。见下图
假设我想要在导航链接旁边添加了一个按钮。这应该如何处理?我们应该把它作为链接添加到导航栏中吗?还是应该和导航分开?我更喜欢这样做。
这种情况下,我们不能在用 justify-content: space-between
来处理间隙,相反,我会在 nav
元素上使用 margin-left: auto
,
这样,它就会自动向右靠齐。
与第一个变化类似,这个变化增加了一个搜索输入,占用了剩余的可用空间。对于flexbox,这可以通过使用flex
属性来实现。
html
css
.search {
flex: 1;
}
现在,搜索输入将填充 brand
和nav
之间的可用空间。 但是,这有一些限制。 在较小的视口上,header 将如下所示:
对于这个示例,HTML标记是相同的,但是 header 里的元素顺序是不同的。我们如何才能做到这一点? 你可能想到用 order
属性来解决这个问题 ?
html
css
.site-header {
display: flex;
justify-content: space-between;
}
.nav {
order: -1;
}
这样有个问题,间隔空间不会使 logo 居中,它只是分散项目之间的空间。
解决方案是给每个子项一个flex: 1
,这将在它们之间分配可用空间。
.brand,
.nav,
.button {
flex: 1;
}
这样,由于flex: 1
,按钮元素变宽了, 解决此问题的唯一方法是将其包裹到另一个元素中。
HTML
这样,我们就可以将下面的logo
和按钮居中。
.logo {
text-align: center;
}
/* 不要介意这里的命名,这只是出于演示*/
.button-wrapper {
text-align: end; /* end 等同于LTR语言中的right */
}
从上面的模型看,做起来可能很简单。 实际上不是。 通常,header
可能有一个内部间距(padding
),当我们强制某项占据全部宽度时,除非清除padding
,否则它不会生效。 但是,删除padding
不切实际,因为它将影响设计中的其他元素 ?。
下面解决此问题的一种解决方法 ?:
将flex: 1 0 100%
添加到导航元素。
如有需要,请更改其order
。 有时,可能还有其他元素,我们想确保导航是最后一个。
加上一个等于宽度等于 padding
的负 margin
,这也会让导航占据整个宽度。
在导航中添加 padding,这会增加一些适当的空间。
最后,使用了justify-content: center
将导航项居中(不重要)
.nav {
flex: 1 0 100%; /* [1] */
order: 2; /* [2] */
margin: 1rem -1rem -1rem -1rem; /* [3] */
padding: 1rem; /* [4] */
display: flex; /* [5] */
justify-content: center; /* [5] */
}
要做到上图的高亮间距,只需将gap: 1rem
添加到flex父节点。没有了gap
,我们还是需要用旧的方式来间隔 ?。
/* 老的方式 */
.brand {
margin-right: 1rem;
}
.sign-in {
margin-right: 1rem;
}
/* 新的方式 */
.site-header {
/* Other flexbox styles */
gap: 1rem;
}
英文原文地址:https://ishadeed.com/article/website-headers-flexbox/
作者:Shadeed
更多编程相关知识,请访问:编程入门!!
以上就是使用CSS Flexbox构建网站标题的详细内容,更多请关注其它相关文章!