如何使用 flexbox 对齐元素？

Question

我在使用 flexbox 时遇到了问题。我创建了一个民意调查，但在对齐元素时遇到问题，请参见下图。这是我的 HTML：

.d-table {
  display: table!important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell!important;
}

.align-middle {
  vertical-align: middle!important;
}

.align-middle>div {
  margin-right: 50px;
}

.flex-row {
  flex-direction: row!important;
}

.d-flex {
  display: inline-flex!important;
}

.d-flex {
  display: inline-flex!important;
}

.RowMargin {
  margin-right: 35px;
  margin-bottom: 5px;
}

.flex-column-reverse {
  flex-direction: column-reverse!important;
}

.CheckboxWrap {
  text-align: center;
}

input[type='radio'] {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background: white;
  border-radius: 50%!important;
  border: 1px solid #343c49;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

.CheckboxWrap+div {
  text-align: center;
}

<div class="d-table-cell align-middle">
  <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
</div>

如果所有元素都均匀分布，那将是理想的，因为现在我的最后一个项目与其他项目不相等，这是一个主要问题。我会请您看一下图片，以便您了解它的全部内容。如果您知道如何解决这个问题，我将不胜感激:-)

Answer 1

首先是文本。请参阅下面的示例

.d-table {
  display: table!important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell!important;
}

.align-middle {
  vertical-align: middle!important;
}

.align-middle>div {
  margin-right: 50px;
}

.flex-row {
  flex-direction: row!important;
}

.d-flex {
  display: inline-flex!important;
}

.d-flex {
  display: inline-flex!important;
}

.RowMargin {
  margin-right: 35px;
  margin-bottom: 5px;
}

.flex-column-reverse {
  flex-direction: column-reverse!important;
}

.CheckboxWrap {
  text-align: center;
}

input[type='radio'] {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background: white;
  border-radius: 50%!important;
  border: 1px solid #343c49;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

.CheckboxWrap+div {
  text-align: center;
}

<div class="d-table-cell align-middle">
  <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
</div>
<br />
<div class="d-table-cell align-middle">
  <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">7</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">8</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">9</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">10</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">11</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">12</span>
      </div>
    </div>
  </div>
</div>

I can not estimate 位使 div 变长，因为没有固定的 div 大小。这是flex的辉煌，也是失败的地方。

一种解决方案可能是为您的.RowMargin 添加一个固定大小，如下所示：

.RowMargin {
    margin-right: 35px;
    margin-bottom: 5px;
    width: 50px;
}

或者你可以离开 flex 并查看网格。

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: 10% 10% 10% 10% 10% 10%;
  grid-gap: 10px;
}

.box {
  background-color:blue;
  color: white;
  padding: 20px;
  font-size: 150%;
}

<div class="wrapper">
  <div class="box a">1</div>
  <div class="box b">2</div>
  <div class="box c">3</div>
  <div class="box d">4</div>
  <div class="box e">5</div>
  <div class="box f">6</div>
  <div class="box d">7</div>
  <div class="box e">8</div>
  <div class="box f">9</div>
  <div class="box d">10</div>
  <div class="box e">11</div>
  <div class="box f">12</div>
</div>

网格的布局由这行提供：grid-template-columns: 10% 10% 10% 10% 10% 10%; 有 6 个10%，因此 6 个框以 10% 宽度的 6 列布局。

Gird 简单且非常有效。但是两者都有浏览器限制。 看这里

css gird browser support | Flex browser support

但是它们都可以相互结合使用:)

进一步阅读

https://gridbyexample.com/examples/

http://flexboxgrid.com/

Answer 2

你可以改变

.RowMargin {
    min-width: 45px;
    margin-right:15px;;
}

min-width 和 margin-right 到每个元素，所以它会分发相同的 width

.d-table {
  display: table!important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell!important;
}

.align-middle {
  vertical-align: middle!important;
}

.align-middle>div {
  margin-right: 50px;
}

.flex-row {
  flex-direction: row!important;
}

.d-flex {
  display: inline-flex!important;
}

.d-flex {
  display: inline-flex!important;
}

.RowMargin {
  margin-right: 15px;
  margin-bottom: 5px;
  min-width: 45px;
}

.flex-column-reverse {
  flex-direction: column-reverse!important;
}

.CheckboxWrap {
  text-align: center;
}

input[type='radio'] {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background: white;
  border-radius: 50%!important;
  border: 1px solid #343c49;
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

.CheckboxWrap+div {
  text-align: center;
}

<div class="d-table-cell align-middle">
  <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
   <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
   <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
   <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
   <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
   <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
   <div class="d-flex flex-row ">
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">1</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">2</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">3</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">4</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">
      <div class="CheckboxWrap">
        <input type="radio" name="">
      </div>
      <div>
        <span class="text1">5</span>
      </div>
    </div>
    <div class="d-flex RowMargin flex-column-reverse">

      <div class="CheckboxWrap">

        <input type="radio" name="">
      </div>
      <div>
        <span class="text1"><span style="font-size:75%">I can not
                            <br>estimate </span></span>
      </div>
    </div>
  </div>
</div>