css - flex 不与 flex : 成比例增长

Question

我希望 box1 占据大约 50% 的屏幕，box2 占据 25%。所以一条线上可能有 2x box1 或 1x box1 和 2x box2 等。我似乎无法通过使用 flex-grow 和 flex-basis 的任何组合来实现这一点。我认为对于给定的 flex-basis，flex-grow 中的比率会生效，但它不适合我。我做错了什么。我遇到这个问题已经有一段时间了，所以我想我会尝试弄个水落石出。

@charset "utf-8";
/* CSS Document */
.flex_container {
    display:-webkit-flex;
    display:-ms-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap:wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.box1 {
    padding: 1%;
    margin: 1%;
    background: red;    
    border: 1px solid blue;

/* flex: shorthand for flex-grow: flex-shrink: flex-basis: */
    flex: 2 0 47%;  
}

.box2 {
    padding: 1%;
    margin: 1%;
    background: blue;   
    border: 1px solid red;

/* flex: shorthand for flex-grow: flex-shrink: flex-basis: */
    flex: 1 0 47%;
}

<div class="flex_container">
    <div class="box1">
        Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim. 
    </div>
    <div class="box1">
Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim. 
    </div>
    <div class="box2">
 Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim. 
    </div>
    <div class="box2">
        Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim. 
    </div>
    <div class="box1">
Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim. 
    </div>
</div>

我只想了解问题所在。我想像下面那样得到它。我可以在不同的类中设置宽度但不使用 flex:谢谢。

50% 50%

25% 25% 50%

Answer 1

我认为你需要在这里使用行。

* {
  box-sizing: border-box;
}
.flex_container {
  display: flex;
}
.box1 {
  padding: 1%;
  background: red;
  border: 1px solid blue;
  flex: 2 0 50%;
}
.box2 {
  padding: 1%;
  background: blue;
  border: 1px solid red;
  flex: 1 0 25%;
}

<div class="flex_container">
  <div class="box1">
    Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum
    nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim.
  </div>
  <div class="box1">
    Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum
    nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim.
  </div>
</div>
<div class="flex_container">
  <div class="box2">
    Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum
    nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim.
  </div>
  <div class="box2">
    Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum
    nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim.
  </div>
  <div class="box1">
    Nulla venenatis scelerisque porttitor. Proin maximus, arcu quis placerat auctor, sem metus commodo neque, at commodo augue neque quis elit. Curabitur id feugiat nunc, vitae rutrum erat. Fusce blandit ornare sem, rhoncus placerat mi placerat id. Vestibulum
    nec sollicitudin ex. Fusce sodales libero et ante ullamcorper consequat. Maecenas id condimentum libero, ac pretium enim.
  </div>
</div>