CODEWITHSUNDEEP
htmlcssflexbox
user7649692
user7649692

Reputation:

Flex direction property

Can somebody please explain why is it important to keep flex direction as column in this case? When you change it to row or row reverse, some portion of the image shrinks in width

JS Fiddle: https://jsfiddle.net/fbshqg0c/7/

.main {
  width: 100%;
}

.left {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  width: 50%;
}

.text {
  display: flex;
  align-items: center;
}

.text-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.width100 {
  color: #fff;
  text-align: center;
  width: 100%;
}
<div class="main">
  <div class="left">
    <img src="https://via.placeholder.com/350x150">
    <div class="text text-img-overlay">
      <div class="width100">
        <h1>500x320</h1>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 141

Answers (2)

Gerard Reches
Gerard Reches

Reputation: 3154

That's because the default value for align-items (alignment of secondary axis: Y when direction is row or X when direction is column) property is stretch, so when you use flex-direction: column the image is stretched on the X axis, but when you change it to flex-direction: row then it's stretched on the Y axis (vertical fit, but not horizontal).

You have to define width: 100% for the image.

Upvotes: 1

Fernando Hernandez
Fernando Hernandez

Reputation: 109

I’m not completely sure what you mean because I didn’t see any difference but you don’t have a width value for the image, so probably this will fix your issue.

img {
width: 100%;
}

Upvotes: 0

Related Questions