使第一个元素全宽，其余元素在一行中[重复]答案

【问题标题】：Make first element full width and the rest in one line [duplicate]使第一个元素全宽，其余元素在一行中[重复]
【发布时间】：2018-01-10 00:00:10
【问题描述】：

我正在尝试创建一种如下所示的子网格：

第一个元素应该是全宽，其余元素必须在同一行中（每个元素的宽度相同），无论存在多少项。

我的尝试：

HTML

<div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

CSS

.flex-container {
    display: flex;
    flex-wrap: wrap;
}

.flex-container .flex-item {
    flex: 1;
}

.flex-container .flex-item:first-child {
    width: 100%;
}

我是 flex 的新手，所以，在我的新手抽象中，理论上这应该有效，但它没有。它使所有.flex-item 都在同一行中，宽度相同（我希望发生这种情况，但仅限:not(:first-child) flex dudes）。

【问题讨论】：

就我个人而言，我会让较大的 div 位于 flex-wrapper 之外，而较小的 div 则位于其中。不过，这只是我。
您的代码不一致。您的 CSS 选择器与您的 HTML 元素不完全匹配。
@dbrree 在这种情况下我无法更改 HTML 结构 :(
@VictorGodoi 是的，抱歉，我刚刚更正了！
那么哪些项目具有.flex 类？你只能修改CSS？你能在 html 中添加类吗？可以加个脚本吗？

标签： html css flexbox

【解决方案1】：

这将尝试将所有从属项保持在一行。

查看 CSS 中的注释

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.flex-container .flex-item {
  background-color: #d94a6a;
  flex: 1 1 0;                                       /*  for 2nd line to not wrap  */
  margin: 0 1px;                                                
  overflow: hidden;                                  /*  for 2nd line to not wrap  */
  min-height: 75px;
  text-align: center;
  -webkit-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
  box-shadow: 4px 4px 7px 0px rgba(50, 50, 50, 0.5);
}

.flex-container .flex-item:nth-child(1) {
  background-color: #3b5bb2;
  flex-basis: 100%;                                  /*  make first take full width  */
  min-height: 400px;
  margin-bottom: 20px;
}

<div class="flex-container">
    <div class="flex-item">I'm the biggest!</div>
    <div class="flex-item">#2</div>
    <div class="flex-item">#3</div>
    <div class="flex-item">#4</div>
    <div class="flex-item">#5</div>
    <div class="flex-item">#6</div>
    <div class="flex-item">#7</div>
</div>

【讨论】：