Question 44987 in Html Question posted in
Some basic documentation can be found here.

Create a flexbox with text and image next to it – Html

I am trying to create a flexbox with image and text next to it.
I am not sure why the image is not aligned next to the text? Text kind of stacks below image.

I am trying to make the text and image align in the same row in desktop.
In responsive, I want the image on top and text in the bottom.

.flex-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0px 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(127, 127, 127, 1);
}
<div class="flex-container">
  <div class="flex-item1">
    <p><img src="/image1.png" style=" float: right; padding-left: 20px;"></p>
  </div>
  <div class="flex-item2">
    <h2>Test</h2>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
      <li>Test4</li>
      <li>Test5</li>
    </ul>
  </div>
</div>
Tags:

2

Answers


  1. 0

    I have tried your code in this JSfiddle. It does work responsively when you move the middle slider across. You had some in-line CSS which I removed and it all seemed to work fine. Maybe there is an issue with the width of the containers and this is causing the responsiveness to only work when the view port with is much smaller.
    Note: I used a random online image for testing

    EDIT: Also note if you would like to change the order of the items just change where they are in HTML as this would be easiest

    HTML

    <div class="flex-container">
  <div class="flex-item1">
    <p><img src="https://www.shutterstock.com/image-vector/short-custom-urls-url-shortener-600w-2233924609.jpg"></p>
  </div>

  <div class="flex-item2">
    <h2>Test</h2>

    <ul>
      <li>Test1</li>

      <li>Test2</li>

      <li>Test3</li>

      <li>Test4</li>

      <li>Test5</li>
    </ul>
  </div>
</div>

    CSS

    .flex-container {

display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
    margin: auto;
background: #f2f2f2;
    padding: 0px 25px;
    box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
    font-size: 1.125rem;
    min-height: 375px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(127, 127, 127, 1);
}

img{
  max-height:200px;
}
    Login or Signup to reply.
  2. 0

    just remove flex-direction:column; and the float:right; your already used flex wrap so it will wrap on small screen and you dont need the p tag
    ok i used flex-reverse and added flex 1 to the second div

    .flex-container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  width: 80%;
  margin: auto;
  background: #f2f2f2;
  padding: 0px 25px;
  box-shadow: 0.1rem 0.1rem 0.2rem 0 rgb(0 0 0 / 40%);
  font-size: 1.125rem;
  min-height: 375px;
  border-width: 1px;
  border-style: solid;
  border-color: rgba(127, 127, 127, 1);
}

.flex-item2{flex:1;}
    <div class="flex-container">
  <div class="flex-item1">
    <img src="https://th.bing.com/th/id/OIP.6QVXHtV8VbGGXMF5RDWWNwAAAA?pid=ImgDet&w=373&h=560&rs=1" >
  </div>
  <div class="flex-item2">
    <h2>Test</h2>
    <ul>
      <li>Test1</li>
      <li>Test2</li>
      <li>Test3</li>
      <li>Test4</li>
      <li>Test5</li>
    </ul>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search