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>

Answer 2

将子元素的宽度更改为100％。

width: 100%;

Flex容器中的响应列

2 个答案: