angular - flex 容器中的响应列

Question

我有一个父组件，它是一个容器

  <search-all-query search-query = "cr.searchQuery"  cities ="cr.cities" priorities= "cr.priorities" city ="cr.city"></search-all-query>

其中包含 3 个子组件

    <child-one cities = "sqc.cities" search-query = "sqc.searchQuery" city = "sqc.city"></child-one>
    <child1-two search-query = "sqc.searchQuery" priorities = "sqc.priorities"></child1l-two>
    <child1-three></child1-three>

我在 flex 框中显示所有 3child 容器。我希望它以这样的方式响应，上面的任何框都可以扩展到父容器的 100% 宽度。如果所有 3 个可见，则宽度应为 33%，如果 2 个可见，则宽度应为 50%。

CSS-

 .child-1,
 .child-2,
 .child-3 {
            width: 597px;
            height: 280px;
            background-color: #ffffff;
            margin: 0 10px;
            box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.08);
            margin: 0 0 0 10px;
            padding-top: 14px;
            padding-right: 30px;
  }

Answer 1

请看下面的例子。如果您使用 display: flex; 并将子项设置为 flex: 1 0 33%; 它应该按要求工作。

.parent {
  width: 600px;
  display: flex;
}

.child {
  flex: 1 0 33%;
}

/* just for visualization */
.child {margin-bottom: 1rem; text-align: center;}
.child:first-child{ background-color: lightblue; }
.child:last-child{ background-color: lightgreen; }

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
</div>
<div class="parent">
  <div class="child">1</div>
</div>