时间戳

首页 > 解决方案 > flexbox：对齐自我和对齐项目不工作

html - flexbox：对齐自我和对齐项目不工作

问题描述

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

标签： htmlcssflexbox

解决方案

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

推荐阅读