换行中心在Flexbox中对齐

问题描述

当前，我正在尝试使用flexbox将列居中，但是在调整浏览器大小时，它仍停留在左侧。我已经尝试证明内容中心和对齐项目中心的合理性，但是我可能没有将它们放在正确的位置。如果有人知道如何解决此问题，将不胜感激！谢谢！

Currently I am trying to get my columns to center using flexbox but it is sticking to the left when I resize the browser. I have tried justify content center and align-items center but I may not be putting them in the right places. If anyone knows how to fix this that would be much appreciated! Thank you!

.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>

推荐答案

要使堆叠的列在移动视图中居中，请在 main 上使用 align-items：center 。对于桌面视图，可以通过指定 flex：0 auto 折叠列。这表明不应允许该项目增长，而应使用自动宽度。然后，将 justify-content：center 添加到 main 以使折叠列居中。

For centering the stacked columns on the mobile view use align-items: center on main. For the desktop view, you can collapse the columns by specifying flex: 0 auto. This indicates that the item should not be allowed to grow and should use an automatic width. Then you add justify-content: center to main to center the collapsed columns.

.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>

这篇关于换行中心在Flexbox中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！