Div 具有最大宽度，在情况 1 child 的情况下，在情况 2 childs 或 3 childs 的情况下，具有 flex

Question

我有一个 parent div，至少包含一个 child。在某些情况下，它将包含 2 children，在最后一种情况下，它将包含 3 children。我想在所有三种情况下实现 children 扩展到 100% 宽度。

案例1 这里childrenA应该是width:100%

<div class="parent">
  <div class="childrenA"></div>
</div>

案例2 这里 childrenA 应该是 width:50% 而 childrenB 应该是 width:50%

<div class="parent">
  <div class="childrenA"></div>
  <div class="childrenB"></div>
</div>

案例3 这里childrenA应该是width:33%，childrenB应该是width:33% childrenC 应该是 width:33%

<div class="parent">
  <div class="childrenA"></div>
  <div class="childrenB"></div>
  <div class="childrenC"></div>
</div>

Answer 1

是的，假定 child 元素的高度已指定，可以借助弹性框自动设置宽度；

在 Parent div

 .parent {
  display:flex;
 }

假设children divs的高度为100px，我们可以做到

 .childrenA{
  background-color:violet;
  height:100px;
  flex:1;
}

.childrenB{
  background-color:grey;
  height:100px;
  flex:1;
}

.childrenC{
  background-color:green;
  height:100px;
  flex:1;
}

flex:1 是 shorthand 用于

 flex-grow : 1;    ➜ The div will grow in same proportion as the window-size       
flex-shrink : 1;  ➜ The div will shrink in same proportion as the window-size 
flex-basis : 0;   ➜ The div does not have a starting value as such and will 
                     take up screen as per the screen size available for
                     e.g:- if 3 divs are in the wrapper then each div will take 33%.

.childrenA {
  background-color: violet;
  height: 100px;
  flex: 1;
}

.childrenB {
  background-color: grey;
  height: 100px;
  flex: 1;
}

.childrenC {
  background-color: green;
  height: 100px;
  flex: 1;
}

.parent {
  display: flex;
}

<div class="parent">
  <div class="childrenA"></div>
</div>

<br>

<div class="parent">
  <div class="childrenA"></div>
  <div class="childrenB"></div>
</div>

<br>

<div class="parent">
  <div class="childrenA"></div>
  <div class="childrenB"></div>
  <div class="childrenC"></div>
</div>

Div 具有最大宽度，在情况 1 child 的情况下，在情况 2 childs 或 3 childs 的情况下，具有 flex

Div with max width, in case 1 child, also in case 2 childs or 3 childs, with flex

css

sass

flexbox