如果一个 child 比宽度 100% 否则 50% 使用 flex sass css

Question

我有一个文章页面，所以设计就像是 2 组文章图像，宽度为 50%，但是当只有一个 child 时，它应该应用 100% 宽度。

需要帮助才能在两个 child 出现时获得 50%，在一个 child 出现时获得 100%

i used flex on parent

设计图片：

.blog-body {
  padding-top: rem(50);
  ul{
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;

    list-style: none;
    li{
      position: relative;
      width: 50%;
      padding: 0 rem(15);
      margin-bottom: rem(68);
      .img-wrap{
        img{
          width: 100%;
          height: 100%;
        }
      }
      
    }
  }

 <section class="blog-group-sec">
        <div class="blog-contain">
            <div class="blog-wrap">
              
                <div class="blog-body">
                    <ul class="items">
                        <li class="item">
                            <div class="img-wrap">
                                <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                            </div>
                        </li>
                          <li class="item">
                            <div class="img-wrap">
                                <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                            </div>
                        </li>
                          <li class="item">
                            <div class="img-wrap">
                                <img src="https://via.placeholder.com/150

C/O https://placeholder.com/" alt="">
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

Answer 1

你需要添加 flex-grow 属性 be on the children

<div class="article parent">
  <div class="child"> Child 1  </div>
  <div class="child"> Child 2  </div>
</div>

<div class="body">
  <div class="body"> 100% </div>
</div>

现在这是CSS代码

.parent{
   display: flex;
}

.child{
  flex-grow: 1;  // grow at equal ratios to the parent
}

这对我有用。我希望它也适合你

如果一个 child 比宽度 100% 否则 50% 使用 flex sass css

if one child than width 100% otherwise 50% using flex sass css

html

css

sass