我可以避免使用此Flexbox包装纸吗?
我不太确定是否需要包装来分隔容器的最大宽度。我可以避免使用此Flexbox包装纸吗?
header
的宽度为100%,而.wrapper
的分隔宽度为1000px。
有没有什么办法可以避免使用.wrapper
div?
body { margin: 0; }
header {
margin: 0;
padding: 0;
background-color: DarkRed;
}
.header-wrapper {
margin: auto;
max-width: 500px;
padding: 10px 0;
}
#logo, #tagline, #menu {
margin: auto;
padding: 5px;
}
#logo {
flex: 2;
background-color: Crimson;
}
#tagline {
flex: 5;
background-color: Salmon;
}
#menu {
flex: 3;
background-color: IndianRed;
}
@media (min-width: 768px){
.header-wrapper {
display: flex;
}
}
<header>
<div class="header-wrapper">
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</div>
</header>
这将取决于您的具体需求,有关于您的具体HTML结构没有快速的规则,当谈到设计一个页面。
如果您想要延伸整个100% width
的背景颜色,但您希望内容具有隐藏的左/右障碍,则可能需要包装来强制执行该障碍规则。否则,红色背景将只与1000px
规则(或任何您设置的居中边界)一样宽。
如果您不需要屏障并希望内容/导航项目跨越整个宽度,则你不需要包装。
再次,它真的取决于你这取决于组件
将所有的div最大宽度,即等于1000像素
我不希望所有div的最大宽度为1000px,我希望这个div的包装具有该属性,但它们中的每一个都有不同的宽度。我认为我的问题刚刚通过@ abdul-ahmad得到解答 – Gekyzo
的整体设计,你做了什么看起来像你的包装将永远是500像素根据媒体查询,每个元素的宽度都是静态的。
您可以修改您的媒体查询并删除额外的包装和弹性值。
下面摘录的行为就像你codepen ......用包装材料少:
body {
margin: 0;
}
header {
margin: 0;
padding: 0;
background-color: DarkRed;
padding: 10px 0;
}
#logo,
#tagline,
#menu {
padding: 5px;
}
#logo {
background-color: Crimson;
}
#tagline {
background-color: Salmon;
}
#menu {
background-color: IndianRed;
}
@media (min-width: 768px) {
header {
display: flex;
justify-content: center;
}
#logo {
width: 100px;
}
#tagline {
width: 250px;
}
#menu {
width: 150px;
}
}
<header>
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</header>
这是一个相当不错的解决方案,但我认为我会遇到较低宽度设备的问题。我很满意设计的当前状态,拥有最大宽度的.wrapper div对我的项目来说不是一个坏的解决方案。 无论如何,谢谢! – Gekyzo
谢谢,我觉得这回答我的问题。 – Gekyzo