无涯教程网

CSS flex，如何在第一行显示一个项目，在下一行显示两个项目

发布于09月28日

我想这是一个非常简单的问题，但是我不能让flex容器中的3个项目显示在2行中，1个在第一行，另2个在第二行.这是flex容器的CSS.很明显，它在一行中显示这3个项目:)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

如果将flex-wrap设置为wrap，则这3项将显示在一列中.我认为包装设置需要在几行上显示容器项目.

div.intro_item_1 {
  flex-grow: 3;
}

我已经跟踪了the instructions in "CSS-Tricks"个，但是我真的不确定应该使用哪种命令组合.任何帮助都将非常受欢迎，因为我对此感到困惑.

推荐答案

您可以这样做:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}

<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>

Here is a demo: 100

此模型依赖于一个"行"满后的换行.由于我们将第一个项目的flex-basis设置为flex-basis%，因此它完全填满了第一行.对flex-wrap: wrap;的特别关注

Css相关问答推荐

VueJS CSS动画不会扩展到v-card/v-col之外

如何使用 tailwind css 修复滚动条始终位于底部？

CSS Select 器仅 Select 具有特定类名称的每行的第一个单元格

在R shiny中 Select DT表格值的背景 colored颜色 (无条件的自由 Select )

使用 place-content： center 的全宽 CSS 网格项目

我怎样才能准确地获得虚构文本内容宽度的边距？

为什么这个绝对定位的：：after 伪元素会崩溃，除非父级有过滤器？

Icomoon：如何避免重复索引(具有相同内容 ID 的不同图标)？

将 CSS 注入 Shadow 根.然而风格正在受到影响

如何通过单击
激活 HTML 链接？

什么是：：content/：：slotted 伪元素，它是如何工作的？

如何在需要时通过 HTTPS 包含 CSS 和 JS 文件？

li 中的第二行在 CSS-reset 后的项目符号下开始

在 Firefox 中删除额外的按钮间距/填充

如何在浏览器的右下角放置一个div？

Unicode 通过 CSS ：before

为什么 CSS 中的光标：指针效果不起作用

打印html时在页面上打印页码

React - 防止父子事件触发

如何复制 iOS 上固定的后台附件

实用课程推荐

相关教程推荐