Question

<td>
   <div class="paper" style="display:flex; ">
      <div class="row" style="height: 20px; background-color: "></div>
   </div>
</td>

在.paper, justify中，内容正常，但是align-items无法正常工作。在其子类.row, align-self中不起作用的地方。在此<td>之前，我还设置了flex属性。代码如下：

<td>
   <div class="wrapper" style="display: flex;">
      <div class="close" style="align-self: center;">
         <i class="icon fa fa-times"></i>
      </div>
      <div class="image ml-15">
         <img class="width-100" src="commercial/front-end/shop/lauren-winter-studio-top-natural_0190-cropped.jpg" alt="">
      </div>
      <div class="details pull-right ml-20" style="align-self: center;">
         <span>Cream Top</span>
      </div>
   </div>
</td>
<td>
   <div class="paper" style="display:flex; ">
      <div class="row" style="height: 20px; background-color: "></div>
   </div>
</td>

Answer 1

使用align-self / align-item时，请确保在父元素的正确方向上设置宽度或高度。

Answer 2

您必须为“ .paper”类提供一些硬编码的高度和宽度，才能使用align-self / align-item。 https://jsfiddle.net/akash94/thpub2ej/2/

.paper{
      display:flex;
      height:200px;
      width:200px;
      border:1px solid lightblue;
      align-items:center;
      justify-content:center
      }

.row{
      align-self:flex-end;
    }

flexbox：自我对齐和对齐项不起作用

2 个答案: