margins of first and last flexbox boxes

Question

I would like to always have same space-distances on both left and right side of all my flexbox boxes. Currently I have this code:

body
  background-color white
  margin 0 0
  padding 0 0

.overlay
  display flex
  position absolute
  background-color grey
  cursor pointer
  color #8e3433
  flex-flow row nowrap
  justify-content flex-start
  height 40vh
  width 100vw
  bottom 0
  left 0
  margin 0
  overflow-y hidden
  overflow-x scroll

.overlay .item-image
  border-radius 5px
  flex 1 1 auto
  min-width 45.0vw
  width 45.0vw
  margin 0 2vw 0 2vw
  border 1px solid yellow

Please see this fiddle as an example (if it does not show rightaway you have to select the style code at the end and just press enter (a bug in JSbin...) and it should show up).

On the left of the first box I get 2vh instead of 4vh. See: Between other boxes it is all fine (4vh). The last box does not have any space on its right side. See: So my question: 1) how to get 4vh on the left of the first box?; and 2) how to get 4vh on the right of the last box?

I tried looking this up and saw solutions for slightly different issues using padding of the container. I would prefer a solution without adjusting the padding of the container.

score 2 · Accepted Answer · edited May 23 '17 at 12:33

2

Updated Answer

Use a pseudo-element as a flex item to occupy space:

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  height: 300px;
  overflow-x: auto;
  width: 600px;
  background: orange;
}
li {
  margin-left: 30px;
  background: blue;
  color: #fff;
  padding: 90px;
  white-space: nowrap;
  flex-basis: auto;
}
ul::after {
  content: "";
  flex: 0 0 30px;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Previous Answer

Note: The solution below may not work because of the box being "over-constrained" (see: How can I stop the last margin collapsing in flexbox?)

Each box has a left and right margin of 2vw.

So the margin space will be half for the first item (there is no right margin, because there is no previous box) and half for the last item (there is no left margin, because there is no additional box).

Instead, try this:

.item-image { margin-left: 4vw }
.item-image:last-child { margin-right: 4w }

edited May 23 '17 at 12:33

Community

1
1

answered Jan 30 '17 at 13:19

Michael Benjamin

346,931
104
581
701

I will try. Do note that in my fiddle there is no margin at all after the last box (although it should have a right-margin). Any idea why? – musicformellons Jan 30 '17 at 13:33
Could you implement the solution you gave there in this fiddle: http://codepen.io/anon/pen/yJwKpW in my fiddle? As I do not get it working. – musicformellons Jan 30 '17 at 18:22
In my case I either have the parent container (a) box elements, or I get (b) a div with classname 'empty-div' which should be 100vw width. However as we create an pseudo-element (after), this also exists in case b and I end up with with an empty-div of 96vw. Any idea how to solve this? I tried setting the pseudo element to none in case of a sibling with classname 'empty-div' but do not succeed... – musicformellons Jan 30 '17 at 22:11
Can you provide the code? Or maybe post a new question with all the details. – Michael Benjamin Jan 30 '17 at 22:12
1

Solved it using a real element (vs pseudo element). I added in case A via javascript a div with ```id='flexboxhack'``` which contained ```""``` and then adding ```#flexboxhack {flex: 0 0 2vw;}``` to my CSS. As this element will not be generated in my case B it works fine now. – musicformellons Jan 31 '17 at 10:20

score 1 · Answer 2 · answered Jan 30 '17 at 13:16

1

you can use first-child and last-child

.overlay .item-image:first-child {
    margin-left: 4vw;
}

.overlay .item-image:last-child {
    margin-right: 4vw;
}

ps be careful; you haven't closed properly the overlay div

answered Jan 30 '17 at 13:16

kiwi1342

1,349
4
15
23

btw you could make it working without flex: https://jsbin.com/verejosabe/1/edit?html,css,output – kiwi1342 Jan 30 '17 at 13:31
Yes, but the fiddle is an simplified example... My extended case needs flexbox. – musicformellons Jan 30 '17 at 14:23

score 0 · Answer 3 · answered Jan 30 '17 at 19:08

Try this

body {
    background-color: #fff;
    margin: 0 0;
    padding: 0 0;
}

.overlay {
    display: flex;
    position: absolute;
    background-color: #808080;
    color: #f00;
    justify-content: space-between;
    height: 40vh;
    padding: 0 4vw;
    bottom: 0;
    left: 0;
    margin: 0;
    overflow-y: hidden;
    overflow-x: scroll;
}

.overlay .item-image {
    border-radius: 5px;
    flex: 1 1 auto;
    min-width: 45vw;
    width: 45vw;
    border: 1px solid #00f;
}

.overlay .item-image :last-child:after {
  content: "";
  width: 30px;
  height: 1px;
  position: absolute;
  left: 100%;
  top: 0px;
}

live demo - https://jsbin.com/yeyemomili/1/edit?html,css,output

margins of first and last flexbox boxes

3 Answers3