Question

我有这个HTML

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
</div>

加上这个CSS

.wrap {
    display: flex;
    align-items: center;
}

.one {
    flex: 0 1 200px;
}

.two {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.three {
    display: flex;
    flex: 0 1 200px;
    justify-content: flex-end;
}

.four {
    ???
}

我想让它看起来像这样，我不知道还有什么用于.four使最后一个div移动到一条新线加上100％宽度

[- one -----][----- two -----][----- three -]
[----------------- four --------------------]

atm看起来像这样

[- one -----][----- two -----][----- three -] [- four -----]

我知道我可以使用另一个

<div class="wrap">

但我不想要这个，谢谢。

Answer 1

将flex-wrap: wrap添加到.wrap课程，并制作.four课程flex: 1 1 100%，这应该可以解决问题：

.wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.one {
    flex: 0 1 200px;
}

.two {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
}

.three {
    display: flex;
    flex: 0 1 200px;
    justify-content: flex-end;
}

.four {
   flex: 1 1 100%;
}

这是一个Codepen example（我为你的div增加了一个边框和高度，以便更容易想象）。

Answer 2

请检查你可以试试这个

<div class="wrap">
     <div class="one"></div>
     <div class="two"></div>
     <div class="three"></div>
     <div class="four"></div>
</div>

<强> CSS

.wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}
.wrap > div{
    border: 1px solid;
    height: 200px;
}

.one {
    flex: 0 1 200px;
}

.two {
    flex: 1 1 auto;
}

.three {
    flex: 0 1 200px;
}

.four {
    flex: 100%;
}

链接https://jsfiddle.net/JentiDabhi/eoat01zn/

Answer 3

这很简单：为此：

＆＃13;

.wrapper{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    background: blue;
    width: 100%;
}
.one, .two, .three{
width: 33%;
background:red;
}

.four{
width:100%;
background:pink;
}

＆＃13;

<div class="wrapper">
  <div class="one">
    one 
  </div>
  <div class="two">
    two
  </div>
  <div class="three">
  three
  </div>
  <div class="four">
  four
  </div>
</div>

＆＃13;

使用flexbox在新行上强制使用最后一个div

3 个答案: