Html 在flexbox中，如何在一行中安排2项，在一列中安排2项？

我正试图转向FlexBox，但无意中发现了我的第一个问题。我已经创建了一个包装，一个适合左侧的徽标和一个高度相同但位于最右侧的消息区域。在中间，我想要2个堆叠的挠性框，顶部是新闻记录器，底部是菜单。我遇到的问题是，新闻标题不在最上面，菜单也不在最下面。这让我快发疯了。谁能帮帮我吗

正文
{
颜色：#CF6；
保证金：0自动；
字号：1.0em；
最大宽度：1280px；
溢出y：滚动；
文本转换：大写；
字体系列：“Tahoma”，Verdana，无衬线；
背景：黑色；
}
#主干道
{
高度：112px；
边缘底部：-112px；
边框：2px实心#444；
}
#头套
{
宽度：92%；
显示器：flex；
保证金：0自动；
xmin宽度：40em；
最大宽度：84em；
柔性流：行换行；
边框：1px实心橙色；
}
#头像
{
排名：0；
左：0；
顺序：1；
宽度：77px；
高度：112px；
边框：1px纯红；
}
#头信息
{
排名：0；
弹性：1；
顺序：2；
颜色：#0FF；
高度：45px；
显示：块；
最小宽度：12em；
字体：标准125%/45px Arial，Helvetica，无衬线；
}
#头条新闻
{
字号：700；
右侧填充：5px；
边框：1px纯绿色；
}
#总帐
{
排名：0；
顺序：3；
宽度：77px；
高度：112px；
边框：1px固体青色；
}
#头像菜单
{
顺序：4；
flex：自动；
保证金：0自动；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：1px纯蓝色；
}

标志

新闻播报员

MSGS

菜单

我遇到的问题是，新闻播报器不在 最上面，菜单不在下面

新闻票证

ul

有一个默认的上边距。这就是为什么它会远离顶部边界。要缩小差距，请将

页边距顶部：0

应用于

#head_News

规则

由于

弹性方向

属性设置为

行

，因此该菜单不在新闻标记下方。您可以在

head\u Wrap

ID中使用速记声明

flex-flow:row-Wrap

设置它，它定义了

flex-direction

和

flex-Wrap

属性。

行

值将flexbox子项（技术上称为“flex项”）对齐一行

我已经创建了一个包装，一个标志，适合在左边和一条信息 高度相同但位于最右侧的区域。在中间 想要两个堆叠的FlexBox，顶部是新闻标签和 底部是菜单

要将新闻代码和菜单堆叠在一列中–在其他两个flex项目之间–您应该将两者包装在flex容器中，并将

flex方向：

设置为

列

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>

注意：您不需要使用

order

属性来执行此操作

---

希望这有帮助。如果您有任何问题，请在下面发表评论。

Brilliant非常感谢。

.ticker-menu-block {
   display: flex;
   flex-direction: column;
}

#head_News {
   font-weight: 700;
   padding-right: 5px;
   border: 1px solid green;
   margin-top: 0;
}