如何使flex不影响子元素？答案

【问题标题】：how to make flex not affect a child element?如何使flex不影响子元素？
【发布时间】：2018-08-18 18:48:54
【问题描述】：

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

.event-card 是父 div 类，event-cards 是子 div。孩子们一个接一个地挨在一起。但是因为我需要它们彼此并排，所以我使用了display:flex，这使得按钮也继承了 flex 属性并且它也出现在孩子们的旁边。我需要将按钮始终设置在一个位置，低于所有孩子。所以简而言之，它不应该继承display:flex。我如何做到这一点？

当我在子类上使用 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>

【问题讨论】：

标签： html css flexbox laravel-blade

【解决方案1】：

如果我理解正确，您需要将 flex 内容全部对齐到中心吗？在这种情况下，将 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;
}

【讨论】：