代码之家 › 专栏 › 技术社区 › Mithc

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

flexbox css html

Mithc · 技术社区 · 9 年前

我正在尝试创建一种类似这样的子网格:

我的尝试:

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-item 在同一条线上,宽度相同(这是我想要的,但只有在 :not(:first-child) flex dudes)。

1 回复 | 直到 9 年前

Asons Oliver Joseph Ash 9 年前

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

参见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>