Flexbox中的第一个孩子的全角 [英] First-child full-width in Flexbox

问题描述

像这样：

：first-child 设置为100％的宽度，其余的子元素 code>：not（：first-child） to flex：1 。为了把它们放在多行上，在容器上使用 flex-wrap：wrap ：

  .container {display：flex;证明内容：空间之间; flex-wrap：wrap;背景：＃e2eaf4; padding：10px;}。child {display：inline-block; font-family：Open Sans，Arial; font-size：20px;颜色：#FFF; text-align：center;背景：＃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>  

How can I can set first-child in flexbox full-width and all of the other child set to flex:1(for split space)?

Like this:

解决方案

You can set the :first-child to a width of 100%, and the rest of the childs :not(:first-child) to flex: 1. To put them on multiplelines, use flex-wrap: wrap on the container:

.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>

这篇关于Flexbox中的第一个孩子的全角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！