目前,我正在尝试使用 Flexbox 将列居中,但当我调整浏览器大小时,它会粘在左侧。我尝试过调整内容中心和对齐项目中心,但我可能没有将它们放在正确的位置。如果有人知道如何解决这个问题,将不胜感激!谢谢你!
.wrap{
display:flex;
}
main{
flex:1;
display:flex;
}
aside, article{
padding:2em;
}
aside{
flex:1;
}
article{
flex:1;
}
@media (max-width: 800px) {
main {
flex-direction: column;
}
}
<div class="wrap">
<main>
<aside>
<h1>Do You Want to...</h1>
<ul>
<li>Rebrand myself online</li>
<li>Take my current website and make it modern</li>
<li>Find a way to make information more accessible for customers</li>
<li> Improve customer service</li>
<li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>
<ul>
<li>Create forms and documents that customers can fill out online</li>
<li>Start an email list for recurring customers</li>
<li>Show relatability with my audience</li>
<li> Have 24/7 online exposure</li>
<li>Create a map or a way for customers to find my location</li>
</ul>
</article>
</main>
</div>
为了使堆叠列在移动视图上居中,请使用align-items: center
on main
。对于桌面视图,您可以通过指定折叠列flex: 0 auto
。这表明该项目不允许增长并且应该使用自动宽度。然后你添加justify-content: center
to main
将折叠的列居中。
.wrap{
display:flex;
}
main{
flex:1;
display:flex;
justify-content: center;
}
aside, article{
padding:2em;
}
aside{
flex:0 auto;
}
article{
flex:0 auto;
}
@media (max-width: 800px) {
main {
flex-direction: column;
align-items: center;
}
}
<div class="wrap">
<main>
<aside>
<h1>Do You Want to...</h1>
<ul>
<li>Rebrand myself online</li>
<li>Take my current website and make it modern</li>
<li>Find a way to make information more accessible for customers</li>
<li> Improve customer service</li>
<li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>
<ul>
<li>Create forms and documents that customers can fill out online</li>
<li>Start an email list for recurring customers</li>
<li>Show relatability with my audience</li>
<li> Have 24/7 online exposure</li>
<li>Create a map or a way for customers to find my location</li>
</ul>
</article>
</main>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)