flex-box，保持第一行展开

Question

I have a container where I need inner blocks following each other and behave like floated ones. 我有一个容器，我需要一个接一个的内部块，它们的行为就像浮动的块一样。 I cannot use float as the layout should re-arrange after a resolution changes. 我不能使用float，因为分辨率更改后布局应重新排列。 Currently, I need both the blocks 1 (70% width) and 2 (30%) reside the same line, but a second one moves itself to the next line: 当前，我需要块1（宽度为70％）和块2（30％）位于同一行，但第二个块将自身移至下一行：

HTML: HTML：

<section>
  <div>Header</div>
  <div>SideRight</div>
  <div>Bottom line</div>
</section>

CSS CSS

body * {
  box-sizing: border-box;
}
section {
  background: #ddd;
  display: flex;
  flex-direction: column;
  max-width:300px;
}
section > div{
  padding: 10px;
}

section > div:nth-child(1){
  background-color: pink;
  width: 70%;
}

section > div:nth-child(2){
  background-color: lightgreen;
  align-self: flex-end;
  width: 30%;
}

section > div:nth-child(3){
  background-color: yellow;
}

You can see the live example here: https://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview 您可以在此处查看实时示例： https : //plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview

So, is it possible to achieve? 那么，有可能实现吗？ Finally, it should look like this: 最后，它应如下所示：

Answer 1

You can add flex-wrap: wrap; 您可以添加flex-wrap: wrap; to section and remove the flex-direction: column; section并删除flex-direction: column; like this 像这样

section {
  background: #ddd;
  display: flex;
  /* flex-direction: column; */
  max-width: 300px;
  flex-wrap: wrap;    //add this
}

if you want the 'Bottom line' fill the entire row add flex-grow: 1; 如果您希望“底线”填满整个行，请添加flex-grow: 1; to section > div:nth-child(3) 至section > div:nth-child(3)

The final result will be something like this 最终结果将是这样的

section {
  background: #ddd;
  display: flex;
  /* flex-direction: column; */    
  max-width: 300px;
  flex-wrap: wrap;           //new
}

section > div:nth-child(3) {
  background-color: yellow;
  flex-grow: 1;              //new
}

Here a working example 这是一个有效的例子

Answer 2

Do you explicitly NEED to use column display for this section? 您是否明确需要在此部分使用列显示？ If not, this is easy to achieve with flex-wrap: wrap on the parent section and then setting a percentage width: 100% to the last child element. 如果不是这样，可以使用flex-wrap: wrap在父节上，然后将百分比width: 100%到最后一个子元素，很容易实现。 You also have to remove flex-direction: column from the parent. 您还必须从父级移除flex-direction: column 。

Here's an updated example for you which produces the desired result . 这是为您更新的示例，可以产生所需的结果。

Answer 3

I changed your flex-direction to a flex-wrap and set the 3rd div to 100% width. 我将flex-direction更改为flex-wrap，并将第3个div设置为100％宽度。 Hope this helps :) 希望这可以帮助：）

  <head>
    <style>
      body *{
        box-sizing: border-box;
      }
      section{
        background: #ddd;
        display: flex;
        flex-wrap: wrap;
        max-width:300px;
      }
      section > div{
        padding: 10px;
      }

      section > div:nth-child(1){
        background-color: pink;
        width: 70%;
      }

      section > div:nth-child(2){
        background-color: lightgreen;
        align-self: flex-end;
        width: 30%;
      }

      section > div:nth-child(3){
        background-color: yellow;
        width: 100%;
      }

    </style>
  </head>

  <body>

    <section>
      <div>Header</div>
      <div>SideRight</div>
      <div>Bottom line</div>
    </section>

  </body>

</html>

flex-box，保持第一行展开

问题描述

3 个解决方案

解决方案1
2 已采纳 2018-11-21 20:15:32

解决方案2
1 2018-11-21 20:16:40

解决方案3
1 2018-11-21 20:21:18

flex-box，保持第一行展开

问题描述

3 个解决方案

解决方案1 2 已采纳 2018-11-21 20:15:32

解决方案2 1 2018-11-21 20:16:40

解决方案3 1 2018-11-21 20:21:18

解决方案1
2 已采纳 2018-11-21 20:15:32

解决方案2
1 2018-11-21 20:16:40

解决方案3
1 2018-11-21 20:21:18