具有相同大小子元素的 CSS Flexbox答案

【问题标题】：CSS Flexbox with Equal Sized Child Element具有相同大小子元素的 CSS Flexbox
【发布时间】：2019-11-07 14:42:53
【问题描述】：

我正在为 FreeCodeCamp 的证书做一个项目，但我无法让 FlexBox 的子元素具有相同的大小（高度和宽度）。

我尝试过多次使用 Flex-Grow、Shrink 等。但似乎由于元素内内容的长度，它们的大小不相等。

我的 Codepen：https://codepen.io/jyjang703/pen/PooeGxv

基本上，我希望 FlexBox 的第三个和第四个盒子大小相同... 任何帮助将不胜感激！

<header>
    <h1>Self-Happiness Survery</h1>
    <h4>For anyone with regrets, griefs, and looking for changes...</h4>
</header>

<main>
  <div>
  <fieldset class="PersonInfo">
    <form action="">
      <label>First Name:</label>
      <input type="text" name="First Name">
      <br>
      <br>
      <label>Last Name:</label>
      <input type="text" name="Last Name">
      <br>
      <br>
      <label>Email:</label>
      <input type="text" name="Email">
      <br>
      <br>
      <label>Number:</label>
      <input type="tel" name="Number" minlength="1" maxlength="10">
      <br>
      <br>
    </form>
  </fieldset>

  <fieldset class="PersonInfo_2">
    <form action="">
      <label>Age:</label>
      <input type="text" name="First Name">
      <br>
      <br>
      <label>Sex:</label>
      <select>
        <option disabled selected value> -- select an option -- </option>
        <option value="Male">Male</option>
        <option value="Female">Female</option>
      </select>
      <br>
      <br>
      <label>Occupation:</label>
      <input type="text" name="Email">
      <br>
      <br>
      <label>Current Martial Status:</label>
        <input type="radio" name="sex" value="male"> Male
        <input type="radio" name="sex" value="female"> Female
      <br>
      <br>
    </form>
  </fieldset>

  <fieldset class="Checkbox_1">
    <form action="">
      <label>What is causing your inner pain?</label>
      <br>
      <br>
      <input type="checkbox" name="Pain"> Breakup
      <input type="checkbox" name="Pain"> Current Job
      <input type="checkbox" name="Pain"> Friendship
      <input type="checkbox" name="Pain"> Family Issue
      <br>
      <br>
      <input type="checkbox" name="Pain"> Future
      <input type="checkbox" name="Pain"> Self Confidence
      <input type="checkbox" name="Pain"> Loneliness
      <input type="checkbox" name="Pain"> Financial Stability
    </form>
  </fieldset>

  <fieldset class="Checkbox_2">
    <form action="">
      <label>What is causing your inner pain?</label>
      <br>
      <br>
      <input type="checkbox" name="Pain"> Breakup
      <input type="checkbox" name="Pain"> Current Job
      <input type="checkbox" name="Pain"> Friendship
      <input type="checkbox" name="Pain"> Family Issue
      <br>
      <br>
      <input type="checkbox" name="Pain"> Future
      <input type="checkbox" name="Pain"> Self Confidence
      <input type="checkbox" name="Pain"> Loneliness
      <input type="checkbox" name="Pain"> Financial Stability
    </form>
  </fieldset>
  </div>

  <fieldset class="Additional_Information">
    <h3>Please provide any additional information</h3>
    <form action="">
      <textarea rows="4" cols="50" placeholder="Additional Life Storeis Here...">
      </textarea>
    </form>
  </fieldset>
</main>

下面是 CSS：

body{
  background-color: #f3e9fc;
}

header{
  text-align: center;
  font-size: 1.5rem;
}

div{
  margin: auto;
  display: flex;
  justify-content: space-between;
}

label{
  display: inline-block;
  float: left;
  width: 150px;
  text-align: left; /*Change to right here if you want it close to the inputs*/
}

.Additional_Information{
  text-align: center;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2
{
  width:25%;
}

我在 codepen 中的 css 末尾添加了它，使其大小相同

【讨论】：

【解决方案2】：

在 flexbox 的子元素上使用 flex-basis:0 和 flex-grow:1。

Basis 就像最小尺寸。然后flex-grow 将大小相等地分配给所有元素。

【讨论】：

【解决方案3】：

这不是你想要的吗？第 1 和第 2 个字段集大小相同，第 3 和第 4 个大小相同。

fieldset {
  flex-grow: 1;
}

【讨论】：

【解决方案4】：

如果要让子元素等宽，需要设置宽度。

div {
      width: 80%;
      display: flex;
      margin: 0 auto;
    }
.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2 {
      flex-basis: 25%;
    }

【讨论】：

如果要让子元素等宽，需要设置宽度。