How to create margins to the side of inline-flex elements?

Question

I am creating a flexbox layout. I want two flex containers to be displayed inline and have an equal amount of space between them and back sides of the screen (that is, equal margin-left of the first one and margin-right of the second one). Now all I know about CSS flexboxes is display: flex and display: inline-flex, so I would want to avoid solution paths that include advanced flexbox properties.

To do so, I set the document's margin and padding to 0, box-sizing to border-box to prevent the containers from changing their original width, set the display property to inline-flex, gave both containers equal measurements.

.item1 {
    display: inline-flex;
    margin-top: 5vh;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-left: 9vw;*/
}

.item2 {
    margin-top: 5vh;
    display: inline-flex;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-right: 9vw;*/
}

<div class="item1"></div>
<div class="item2"></div>

I also set margin-left of the first item equal to the margin-right of the second one, but they're blatantly different visually.

Yes, I want them centered and I want them to have equal space at the sides. — stellar, Aug 08 '19 at 11:10
Inline elements in general can be centered, by setting `text-align: center` on the parent element. _“Now all I know about CSS flexboxes is display: flex and display: inline-flex, so I would want to avoid solution paths that include advanced flexbox properties.”_ - why, what would be wrong with if you learned something new? — misorude, Aug 08 '19 at 11:11
Because I want to know of more than one way of solving the issue, including the one relying on the previous knowledge. — stellar, Aug 08 '19 at 11:15
Is this what you are looking for: https://jsfiddle.net/srfv3txp/ ? I've created `flex` container with `justify-content: center` which centers inside elements. — Jax-p, Aug 08 '19 at 11:17

score 1 · Accepted Answer · answered Aug 08 '19 at 11:23

In this situation, you want to use the flex property justify-content: space-evenly;. What this will do, is spacing all the elements evenly, including the right and left margins. But for that, you need to create a container with the items you want inside. Look at the following example:

.flex{
 display: flex;
 justify-content: space-evenly;
}

.item {
    margin-top: 5vh;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width:20vw;
}

<div class="flex">
 <div class="item"></div>
 <div class="item"></div>
  <div class="item"></div>
</div>

score 0 · Answer 2 · answered Aug 08 '19 at 11:24

Check this Example:

.flex { 
display: flex;
}
.center { 
   margin: auto;d
}

.item1 {
    display: inline-flex;
    margin-top: 5vh;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-left: 9vw;*/
}

.item2 {
    margin-top: 5vh;
    display: inline-flex;
    background-color: #ff8000;
    border: 3px solid transparent;
    height: 30vh;
    width: 40vw;
    /*margin-right: 9vw;*/
}

<!-- display: flex to center it's content-->
<div class="flex">
<!-- margin: auto to to be centered -->
   <div class="center">
      <div class="item1"></div>
      <div class="item2"></div>
   </div>
</div>

How to create margins to the side of inline-flex elements?

2 Answers2