如何将FlexBox的第一个子项设置为全角,并将所有其他子项设置为flex:1(用于拆分空间)?

这样地:

enter image description here

推荐答案

您可以将:first-child设置为宽度100%,将 children 的睡觉设置为:not(:first-child)flex: 1.

要将它们放在多行上,请在容器上使用flex-wrap: wrap:

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #e2eaf4;
  padding: 10px;
}

.child {
  display: inline-block;
  font-family: "Open Sans", Arial;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  background: #3794fe;
  border-radius: 6px;
  padding: 20px;
  margin: 12px;
}

.child:first-child {
  width: 100%;
}

.child:not(:first-child) {
  flex: 1;
}
<div class="container">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>

Css相关问答推荐

如何在没有额外间隔的情况下使用Angularmaterial 图标?

在carousel组件上应用css转换时出现问题

实现前景渐变到背景的平滑混合

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

是否可以在元素之间对齐渐变?

TypeScript 中有效的 CSS 属性名称数组,但带有连字符

Tailwind css 和 Next.js 导航组件 z-index 不工作

为什么同一个 CSS 类连续出现两次

如何在流线型多页面应用程序中在表情符号和页面名称之间留出一些空白

在revealjs/Quarto中定义一类反背景的幻灯片

n 个元素的 CSS 关键帧动画

如何将数据从样式化组件发送到函数?

基于内容显示(show)/隐藏(hide)同级div

我怎样才能在某些区域制作一个单独的文本行,而在其他区域制作一个实心填充?

你能用 JavaScript 控制 GIF 动画吗?

CSS中的旋转地球

如何使内容出现在固定的 DIV 元素下方?

范围内的 CSS 未在组件中应用

使用自定义 CSS 在 WebView 中呈现 HTML

我应该在我的 Bootstrap 项目中使用 normalize.css 吗?