CODEWITHSUNDEEP
htmlcssflexbox
vuvu
vuvu

Reputation: 5318

How to align and stretch the children when flex-direction is column?

I want to center-align the children inside a flex container and they also stretch. In addition the children have a max-width. Why don't they stretch?

jsfiddle

.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  max-width: 500px;
  border: solid;
  text-align: center;
  margin-bottom: 20px;
  padding: 20px;
}
<div class="wrap">
  <div class="box">
    Hello world
  </div>
  <div class="box">
    Hello universe
  </div>
</div>

Upvotes: 0

Views: 41

Answers (1)

robb
robb

Reputation: 114

If you use max-width the box will keep the width of the text inside + paddings + margins. If you want the children to have the same width you have to set

min-width && max-width

so the children will be fixed to 500px

solution 2: give the "wrap" container these rules

width:500px; align-items: stretch;

the boxes will stretch by the dimension of their container. Also if you want to center the container you can add

margin: 0 auto;

to "wrap" class.

Upvotes: 1

Related Questions