Question

我希望box1占据屏幕的50％左右，而box2占据25％。因此，一条线上可能有2x box1或1x box1和2x box2等。我似乎无法通过使用flex-grow和flex-basis的任何组合来实现这一点。我认为，对于给定的弹性基础，弹性增长的比率会生效，但对我来说并非如此。我做错了什么。我已经有一段时间没有这个问题，所以我想我会试着深究它。

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

flex不会与flex成比例增长：

1 个答案: