CODEWITHSUNDEEP
htmlcssflexbox
billy
billy

Reputation: 1493

Flex items are not aligned side by side (i.e. spaced out)?

Okay using flex to align the image (purple) and the content (yellow) side by side. However I am getting extra space between and is throwing off the image to the right.

See here: https://i.sstatic.net/CpQBh.jpg

It's supposed to be:

I've checked padding and margin, however it hasn't worked for me. Any ideas?

Here is the html

<div class="sec-1">
    <h2>Introducing 'Keeva' world's smartest assistant.</h2>
    <div class="flex-box">
        <div>
            <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
                        <!-- Download Buttons -->
                    <img class="download-btns" src="img/playstore-1.png">
                    <img class="download-btns" src="img/iphone-1.png">
        </div>
        <!-- Phone 0 image -->
        <img class="phone-img" src="img/iphone-cut.png" alt="phone image">          
    </div>
</div>

CSS

@media screen and (min-width: 599px) {
    .sec-1 h2 {
        font-size: 1.2em;
        background-color: green;
    }

    .sec-1 p {
        font-size: 1.1em;
        width: 50%;
        background-color: yellow;
    }

    .sec-1 .phone-img {
        position: relative;
        top: 10%;
        left: 30%;
        background-color: purple;

    } 
    .download-btns {
        position: relative;
        right: 25%;
        background-color: orange;
    }

    .sec-1 .sales-copy {
        width: 50%;
    }


    .flex-box {
        display: flex;
           justify-content: flex-end;

    }

}

Upvotes: 0

Views: 1331

Answers (1)

Asons
Asons

Reputation: 87191

Since display: flex makes its immediate descendants flex items, it is only the div that wraps the the p/img that becomes one.

So to make this work, and since img doesn't behave normal when being flex items, move that div wrapper to the img and it will flow as intended.

I also changed width: 50% to flex-basis: 60% so the yellow element becomes 60%, and added flex-grow: 1 to the div wrapper, so it takes the remaining space.

Updated based on a comment

Changed to an outer and an inner Flexbox wrapper, so the buttons are located below the yellow element and the image to the right

.sec-1 h2 {
  font-size: 1.2em;
  background-color: green;
}

.sec-1 p {
  margin: 0;
  font-size: 1.1em;
  background-color: yellow;
}

.sec-1 .phone-img {
  position: relative;
  top: 10%;
  left: 30%;
  background-color: purple;
}

.flex-box-outer {
  display: flex;
}
.flex-box-outer > div {
  flex-grow: 1;
}
.flex-box-inner {
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div class="sec-1">
  <h2>Introducing 'Keeva' world's smartest assistant.</h2>
  <div class="flex-box-outer">  
    <div class="flex-box-inner">
      <p class="sales-copy">Keeva smartphone app helps you organize your work schedule, meetings, project deadlines and much more.</p>
    <!-- Download Buttons -->
      <div>
        <img class="download-btns" src="http://placehold.it/100x50/?text=playstore">
        <img class="download-btns" src="http://placehold.it/100x50/?text=iphone">
      </div>
    </div>
    
  <!-- Phone 0 image -->
    <div>
      <img class="phone-img" src="http://placehold.it/100x50/?text=iphone cut" alt="phone image">
    </div>
  </div>
</div>

Upvotes: 1

Related Questions