Flexbox items alignment with same height & item aligment-CodePudding

I have a simple layout with image on Left and Title of blog on right with light grey background for large screen or were width is minimum 800px. for smaller screens it should show image on top and Title below image. It is working fine except two thing

It show extra space under image which is shown as yellow background in this case.
I want Title Item to be same height as Image element with light grey background, in this case which is represented as red.

.flex-container {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid blue;
  height: 100%;
}

.flex-container>div {
  background-color: yellow;
  color: #555;
  width: 50%;
  height: 100%;
  margin: 0px;
  text-align: center;
  align-self: center;
  font-size: 30px;
}

.title-wrapper {
  background-color: #f00 !important;
}

.imgx {
  width: 100%;
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container>div {
    width: 100%;
    margin: 0px;
  }
  .imgx {
    width: 100%;
  }
}

<div >
  <div ><img  src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
  <div >This is the title</div>
</div>

CodePudding user response：

To avoid the gap under the image, 2 classical options :

reset vertical-align: to top or bottom
or reset display to block.

To center content inside the second box, make it also a grid or flex box

Possible fix :

.flex-container {
  display: flex;
  flex-direction: row;
  border: 1px solid blue;
  height: 100%;
}

.flex-container>div {
  background-color: yellow;
  color: #555;
  width: 50%;
  text-align: center;
  font-size: 30px;
}

.flex-container .title-wrapper {
  background-color: #f00;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
}

.imgx {
  width: 100%;
  display:block;
}

@media (max-width: 800px) {
  .flex-container {
    display:grid;/* or block*/
  }
  .flex-container>div ,
  .imgx {
    width: 100%;
  }
}

<div >
  <div ><img  src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
  <div >This is the title</div>
</div>

CodePudding user response：

To get rid of the space beneath the image, the image needs to be display: block, then to make the title full height and still aligned centre, you need to remove the height and then make the title itself flex and use align and justify on it (see comments in css below):

.flex-container {
  display: flex;
  align-items: stretch;
  flex-direction: row;
  border: 1px solid blue;
  height: 100%;
}

.flex-container>div {
  background-color: yellow;
  /* remove height from here */
  color: #555;
  width: 50%;
  margin: 0px;
  font-size: 30px;
}

.title-wrapper {
  background-color: #f00 !important;
  /* add the following to here */
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgx {
  width: 100%;
  display: block;  /* add this */
}

@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-container>div {
    width: 100%;
    margin: 0px;
  }
  .imgx {
    width: 100%;
  }
}

<div >
  <div ><img  src="https://dummyimage.com/600x400/000/add413&text=IMAGE"></div>
  <div >This is the title</div>
</div>

CodePudding user response：

you have to remove height and align-self in .flex-container > div

.flex-container > div {
  background-color: yellow;
  color: #555;
  width: 50%;
  margin: 0px;
  text-align: center;
  font-size: 30px;
}

are you sure to use align-self or did you mean align-items and justify-content?