Question

我有一个父div和多个子div。由于我从json response获取整个视图，因此无法移动父div下方的按钮。

.event-card是父div类，event-cards是子div。孩子们一个接一个地相互追加。但是因为我需要它们彼此相邻，我使用display:flex使得按钮也继承了flex属性，它也出现在孩子们旁边。我需要按钮始终设置在一个地方，在所有孩子下面。简而言之，它不应该继承display:flex。我如何实现这一目标？

当我在child上使用display:inline-flex并从父类中删除display: flex时，一切都按照我需要的方式工作，但子项不在页面的中心。相反，所有这些都对齐左侧。按钮保持在中心，孩子们不会受到父母的align-items:center属性的影响。

.event-card {
    display: inline-flex;
//  flex-direction: row;
    flex-wrap: wrap;    
    align-items: center;
    justify-content: center;
}

.event-cards { 
//  display: inline-flex;
    flex-basis: 100%;
    margin-left:auto; 
    margin-right:auto; 
    padding-left:20px;
}

刀片文件

<div class="event-card"> // parent div- wrapper with its multiple children
  (in @for loop)
  <div class = "event-cards"> // child 1 ,child 2... (each child gets appended to parent)
    <div class="event-card__content">
      //content here
    </div>
  </div>
<div>

<div id = "load-more-cards" class="event__load-more-button">
    <button type="button" onclick="loadMoreCard('{{$data->nextPageUrl()}}')"
            class="btn btn-secondary">
        Click For More
    </button>
</div>

Answer 1

如果我理解正确，你需要将灵活内容全部与中心对齐吗？在这种情况下，将text-align：center添加到您的子元素应该可以正常工作。 https://jsfiddle.net/7f8m5L38/10/

 .event-card {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
}

.event-cards {
  text-align: center;
  flex-basis: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
}

如何使flex不影响子元素？

1 个答案: