CODEWITHSUNDEEP
htmlcssflexbox
progyammer
progyammer

Reputation: 1508

How to align inline-block elements inside flex box?

I have an outer div which is a flex box. Inside it, there will be three elements as inline-block: two advertisements on the left and right, and the content in between. I want the advertisements to be aligned to the left and right and then work on my content in the middle as if the ads were the margins of the page (I hope this is clear). I'm having to use a lot of   spaces but is there a way to directly place the two ads on either sides of the flex box? I tried using position:right and float:right; properties but these didn't work.

Here's my code:

<!---==OUTER DIV==-->
<div id="content-flex" style="display:flex;">


    <!--====LEFT SIDE AD====-->

    <div style="display:inline-block; position:left;">
        <span style="color:white;">Advertisement</span><br/>
        <a href="http://www.bmw.com.au" target="_blank">
            <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
        </a><br/>
    </div>

    <!--HERE I HAVE TO USE A LOT OF &nbsp;-->



    <!--====MIDDLE : CONTEN====T-->

    <div style="display:inline-block;">

        <p>Loreum Ipsum...</p>

    </div>

    <!--HERE I HAVE TO USE A LOT OF &nbsp;-->



    <!--====RIGHT SIDE AD====-->

    <div style="display:inline-block; position:right;">
        <span style="color:white;">Advertisement</span><br/>
        <a href="http://www.bmw.com.au" target="_blank">
            <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
        </a>

    </div>

</div>

This is how the page looks right now:

enter image description here

Upvotes: 1

Views: 5138

Answers (3)

DreamTeK
DreamTeK

Reputation: 34197

This is how it can be managed using the flex box model:

#content-flex,
#AdLft,
#AdRgt{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
}
.Middle{
  width:100%;
}
<div id="content-flex">

  <div id="AdLft">
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

  <div class="Middle">
    <p>Loreum Ipsum...</p>
  </div>

  <div id="AdRgt">
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

</div>

Upvotes: 1

Nenad Vracar
Nenad Vracar

Reputation: 122047

If you just set flex: 1 on middle div it will take all the free space and push right ad to right side. Also once you set display: flex on parent element float property won't work on child elements.

#content-flex > div:nth-child(2) {
  flex: 1;
}
<div id="content-flex" style="display:flex;">

  <div>
    <span style="color:white;">Advertisement</span>
    <br/>
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
    <br/>
  </div>

  <div>
    <p>Loreum Ipsum...</p>
  </div>

  <div >
    <span style="color:white;">Advertisement</span>
    <br/>
    <a href="http://www.bmw.com.au" target="_blank">
      <img src="https://media.giphy.com/media/zuTk53kSNOJJC/giphy.gif" />
    </a>
  </div>

</div>

Upvotes: 2

yqlim
yqlim

Reputation: 7080

Add the following style to your outer div.

justify-content: space-between;

or

justify-content: space-around;

Look here for more alignment options for flex.

Upvotes: 1

Related Questions