how to make flex not affect a child element? - html

Question

I have a parent div and multiple child divs. Since I am getting the entire view from json response, I can not move the button below the parent div.
.event-card is the parent div class and the event-cards is the child div. The children are appended one by one beside each other. But because I need them beside each other, I used display:flex which makes the button also inherit the flex property and it is also appearing beside the children. i need the button to always be set in one place, below all the children. So in short, it should not inherit display:flex. How do I achieve this?
When I use display:inline-flex on child and remove the display: flex from the parent class, everything works the way I need it to but the children are not centered on the page. Instead, all of them align to the left. The button stays in the center nicely bu the children do not get affected by the align-items:center property given to the parent.
.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;
}
Blade files
<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

If I'm understanding correctly, you need flex content to all align to the center? In which case adding text-align: center to your child element should work. 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;
}