3

2 questions. It seems that flexbox is a great tool for symmetrical layouts. However, when wrapping elements I cannot find examples of manipulating the last item(s) to kind of "break row flow" and either stick it to the right similar to how justify-content:flex-end; works or stack on top of each other.

Here is the codepen and code:

body {
  display: flex;
  flex-wrap: wrap;
}

.full-width {
  flex: 100%;
}

.fifty {
  flex: 0 0 50%;
}

.one-third {
  flex: 0 0 33%;
  /*how do we get the second .one-third to stick to the right?*/
}
<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>

Here is a screenshot of what row wrapping looks like: enter image description here

Here is what I'm after: enter image description here

A similar question I can't find anything on is if it's possible to stack the last two elements in a row on top of each other.

Ben Racicot
  • 5,332
  • 12
  • 66
  • 130
  • It might help if you include a screenshot of the result you desire. You could do this in MS Paint or similar with a few rectangles. I for one I don't quite understand what you're trying to do just by the description you provided. – ThisClark Aug 01 '18 at 03:26
  • @ThisClark I included a codepen but have added a screenshot. Also this is not a duplicate. The question referenced has nothing to do with breaking out of the row. – Ben Racicot Aug 01 '18 at 12:23

1 Answers1

2

You can try doing this.

set the margin-left of the .one-third last element.

Please see the codepen link: https://codepen.io/davecar21/pen/QBQRvL

body{
  display:flex;
  flex-wrap: wrap;
}
.full-width{
  flex:100%;
}
.fifty{
  flex:0 0 50%;
}
.one-third{
  flex:0 0 33%;
  // how do we get the second .one-third to stick to the right?
}

.one-third:last-child{
  margin-left: auto;
  // will make the last-child margin-left to be auto so it will align to the right side
}




<div class="full-width">full-width</div>
<div class="fifty">fifty</div>
<div class="fifty">fifty</div>
<div class="one-third">one-third</div>
<div class="one-third">one-third <br/> How do we get this to stick to the right when part of a row?</div>

A similar question I can't find anything on is if it's possible to stack the last two elements in a row on top of each other.

I think it can only be possible if the two stack elements will have a width is greater than 50%.

div.one-third:nth-child(4),
div.one-third:nth-child(5){
      margin:auto;
      flex:0 0 55%;
}
davecar21
  • 2,606
  • 21
  • 33
  • Awesome! I recently read about this too! Do'h! Any advice on the second part of my question, stacking the last two elements? – Ben Racicot Aug 01 '18 at 12:26
  • 1
    @BenRacicot Please see my updated answer about the second part of your question. – davecar21 Aug 01 '18 at 16:42
  • could I ask you to revisit the stacking row items on https://stackoverflow.com/questions/51937861/flexbox-when-wrapping-in-a-row-how-can-i-stack-two-elements-without-extra-mark ? Here https://stackoverflow.com/questions/34480760/is-it-possible-for-flex-items-to-align-tightly-to-the-items-above-them @Michael_B recommends `flex-flow: column wrap` but I can't get examples to work yet. This could be huge! – Ben Racicot Aug 21 '18 at 02:15
  • 1
    @BenRacicot I think `flex-flow: column wrap` is not a option as he said in [https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally](https://stackoverflow.com/questions/44377343/css-only-masonry-layout-but-with-elements-ordered-horizontally). it will be best to used grid. – davecar21 Aug 21 '18 at 02:52