如何使用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

您可以更改

.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>

Answer 2

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

.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大小。这既是灵活性的光辉，也是灵活性的下降。

一种解决方案可能是像这样向您的.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个框被排列在6列中，宽度为10％。

女孩很简单而且很有效。但是，两者都有浏览器限制。 看到这里

css gird browser support | Flex browser support

但是它们可以彼此结合使用：）

  

进一步阅读

https://gridbyexample.com/examples/

http://flexboxgrid.com/