我正在尝试转向 flexboxes 并且偶然发现了我的第一个问题。我创建了一个包装器，一个适合左侧的 Logo 和一个高度相同但位于最右侧的消息区域。在中间，我想要 2 个堆叠的 flexbox，顶部是新闻行情，底部是菜单。我遇到的问题是新闻行情不在最上面，菜单也不在它下面。这让我抓狂。谁能帮帮我。
body
{
color: #CF6;
margin: 0 auto;
font-size: 1.0em;
max-width: 1280px;
overflow-y: scroll;
text-transform: uppercase;
font-family: "Tahoma", Verdana, sans-serif;
background: black;
}
#head_Main
{
height: 112px;
margin-bottom: -112px;
border: 2px solid #444;
}
#head_Wrap
{
width: 92%;
display: flex;
margin: 0 auto;
xmin-width: 40em;
max-width: 84em;
flex-flow: row wrap;
border: 1px solid orange;
}
#head_Logo
{
top: 0;
left: 0;
order: 1;
width: 77px;
height: 112px;
border: 1px solid red;
}
#head_Info
{
top: 0;
flex:1;
order: 2;
color: #0FF;
height: 45px;
display: block;
min-width: 12em;
font: normal 125%/45px Arial, Helvetica, sans-serif;
}
#head_News
{
font-weight: 700;
padding-right: 5px;
border: 1px solid green;
}
#head_Note
{
top: 0;
order: 3;
width: 77px;
height: 112px;
border: 1px solid cyan;
}
#head_Menu
{
order: 4;
flex: auto;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid blue;
} <body>
<!-- header -->
<header id="head_Main">
<section id="head_Wrap">
<article id="head_Logo">
LOGO
</article>
<article id="head_Info">
<ul id="head_News">
<li>NEWS TICKER</li>
</ul>
</article>
<article id="head_Note">
MSGS
</article>
<article id="head_Menu">
<nav>
<ul>
MENU
</ul>
</nav>
</article>
</section>
</header>
<!-- body -->
<!-- footer -->
</body>最佳答案
The problem that I am having is that the news ticker is not at the very top, and the menu is not underneath it.
新闻代码 ul 有一个默认的上边距。这就是它远离顶部边界的原因。要缩小差距，请将 margin-top: 0 应用于 #head_News 规则。
因为 flex-direction 属性设置为 row，所以菜单不在新闻滚动条下方。您已在 head_Wrap ID 中设置了简写声明 flex-flow: row wrap，它定义了 flex-direction 和 flex-wrap 属性。 row 值将 flexbox 子项(技术上称为“flex 元素”)对齐成一行。
I have created a wrapper, a logo that fits on the left and a message area that takes the same height, but on the far right. In the middle I would like 2 stacked flexboxes, the top being the news ticker and the bottom being the menu.
要将新闻自动收录器和菜单堆叠在一列中 – 在其他两个 flex 元素之间 – 您应该将两者包装在一个 flex 容器中并将 flex-direction: 设置为 column.
HTML
<div id="ticker-menu-block">
<article id="head_Info">
<ul id="head_News">
<li>NEWS TICKER</li>
</ul>
</article>
<article id="head_Menu">
<nav>
<ul>
MENU
</ul>
</nav>
</article>
</div>
CSS
.ticker-menu-block {
display: flex;
flex-direction: column;
}
#head_News {
font-weight: 700;
padding-right: 5px;
border: 1px solid green;
margin-top: 0;
}
注意:您不需要 order 属性来完成这项工作。
希望这对您有所帮助。如果您有任何问题，请在下方发表评论。
关于html - 在 flexbox 中，如何将 2 个元素排成一行，将 2 个元素排成一列？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32194647/