弹性框按钮元素没有获得 50% 的宽度 [重复]答案

【问题标题】：flex box button element not getting 50% of width [duplicate]弹性框按钮元素没有获得 50% 的宽度 [重复]
【发布时间】：2018-04-25 19:29:39
【问题描述】：

div{
  display:flex;
  border:1px solid red;
}

div button{
  flex:0 0 1;
  border:1px solid gray;
}

<div>
   <button>Button one</button>
   <button>Button two</button>
</div>

【问题讨论】：

【解决方案1】：

首先，您有一个拼写错误“dispaly:flex;”。 :)
其次，只需将flex-grow: 1; 放在按钮上。
示例代码：

div{
  display:flex;
  border:1px solid red;
}

div button{
  flex-grow: 1;
  border:1px solid gray;
}

希望对你有帮助。

【讨论】：

【解决方案2】：

试试这个

div{
  display:flex;
  border:1px solid red;
}

div button{
  flex: 1;
  border:1px solid gray;
}

<div>
   <button>Button one</button>
   <button>Button two</button>
</div>

【讨论】：

【解决方案3】：

应该是这个。

div {
  display: flex;
  border: 1px solid red;
}

div button {
  flex: 0 0 50%;
  border: 1px solid gray;
}

<div>
   <button>Button one</button>
   <button>Button two</button>
</div>

【讨论】：