Applying margin to flex items

Question

So I got this three column layout example from stackoverflow, but I'm trying to get both columns and rows using flexbox.

My ultimate goal is to have a three column layout (the left side be pictures, and the two columns to the right to be text).

However, I need everything to be lined up (the text and the images be aligned on the same axis).

But my problem is that when I try and space out the elements in the columns using margin-bottom, only the text column one is working (and not the image one) and I can't figure out why.

I want the left column margin-bottom to work as well. But even when I add margin-bottom for all columns only the ones with the divs work.

Should I put my images in divs as well?

Here's an image of the problem I'm facing:

* {
  margin: 0;
}
html,
body {
  height: 100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  width: 80%;
  height: 100%;
  margin: 0 auto;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  order: 1;
  background: red;
  flex-basis: 100%;
  height: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  justify-content: flex-start;
  order: 3;
  background: green;
  flex-basis: 100%;
  height: 100%;
}
.right {
  order: 2;
  background: yellow;
  flex-basis: 100%;
  height: 100%;
}
.box {
  display: flex;
  flex-flow: column wrap;
  align-items: flex-start;
  justify-content: flex-start;
  height: 50px;
  width: 50px;
}
@media screen and (min-width: 600px) {
  .container {
    flex-wrap: nowrap;
  }
  .left {
    flex-basis: 1;
    order: 1;
  }
  .middle {
    flex-basis: 1;
    order: 2;
  }
  .right {
    flex-basis: 1;
    order: 3;
  }
}
.left,
.right,
.middle * {
  margin-bottom: 25%;
}

<div class="container">
  <div class="left">
    <img src="cat1.jpeg" alt="cat">
    <img src="cat1.jpeg" alt="cat">
  </div>
  <div class="middle">
    <div class="box">`
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
    <div class="box">`
      <p>texteiehiefief texteiehiefief texteiehiefief texteiehiefief</p>
    </div>
  </div>
  <div class="right"></div>
</div>

Actually, you are trying to display tabular information, so using a table would be a more appropriate choice than using flexbox. — DavidA, Jul 18 '16 at 17:56

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

There's a problem with the selector you're using to apply the bottom margin:

.left,
.right,
.middle * {
    margin-bottom: 25%;
}

This selector says:

Apply the margin to .left
Apply the margin to .right
Apply the margin to all descendants of .middle

That's why your text boxes are getting the margin – they're descendants of .middle – and your images are not – they're descendants of .left, but .left in your CSS isn't targeting descendants.

Make this adjustment:

.left *,
.right,
.middle * {
    margin-bottom: 25%;
}

ALSO, KEEP IN MIND that the flexbox specification discourages use of percentages on margin and padding when dealing with flex items (read more).

edited May 23 '17 at 12:22

Community

1
1

answered Jul 18 '16 at 19:31

Michael Benjamin

346,931
104
581
701

How do you recommend I space out the images? It seems like they are stretching. I want the images to resize to fit mobile so I put max-width: 100% for .left img but that's not working and I also want to space out the images. When I do align-items: space-between it's not working. – Shinji-san Jul 18 '16 at 21:04
`align-items` works along the [**cross-axis**](http://stackoverflow.com/q/32551291/3597276). When `flex-direction` is `column`, like in those containers, it aligns horizontally. For vertical alignment use `justify-content`: https://jsfiddle.net/6aeo7Ls1/ – Michael Benjamin Jul 18 '16 at 21:17

Applying margin to flex items

1 Answers1