0

I'm using flexbox to create a responsive design and I have it working for a smaller width, so I'm keen to keep this layout and am just overwriting certain parts to get a different layout.

In my JSFiddle, you can see I have a .featured article (orange) which sits to the left of the viewport. I then have a number of smaller articles which I want to have sitting on the right of .featured

Using display:flex; with flex-wrap:wrap; gets the first item to sit to the right, but the subsequent green boxes all sit below. It seems my first green article is getting the full height of the row that it sits on.

How can I tidy up this layout to get the green articles to sit to the right?

.summaries {
  display: flex;
  flex-wrap: wrap;
  text-align:right;

  article {
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;
    width: calc(60% - 24px);
  }
}

article {
  height: 100px;
  background-color: green;
  outline: 1px solid black;
  &.featured {
    height: 500px;
    flex: 0 0 calc(40% - 24px);
    margin-left: 0;
    margin-right: 24px;
    background-color: orange;
  }
}
TylerH
  • 20,799
  • 66
  • 75
  • 101
user1486133
  • 1,309
  • 3
  • 19
  • 37
  • It's working as expected...that's the way wrapping works. You would have to wrap the green articles in their own column wrapper. – Paulie_D Jun 03 '16 at 16:14
  • @Paulie_D I understand it's working as expected, but I'm looking for advice on adjustments to make this layout work. I can't add more HTML so I cannot add a column to the other items. – user1486133 Jun 03 '16 at 16:18
  • possible duplicate: http://stackoverflow.com/q/34480760/3597276 – Michael Benjamin Jun 03 '16 at 16:20
  • The you may have to resort to Javascript to do the wrapping for you. – Paulie_D Jun 03 '16 at 17:10
  • ...and if you are "creating a responsive design" then why can't you change the HTML...isn't that the point of designing it? – Paulie_D Jun 03 '16 at 18:36

0 Answers0