0

How can I do this sort of a gallery style layout with flex box?

I have a <ul> with <li> in them. The first <li> I want to be double size and have the rest of the items flow around it.enter image description here

I can layout the items using flexbox with the following code, but when I go double size on the first item I can't figure out how to reflow the boxes to fit around it as pictured.

ul, li {
    padding: 0;
    margin: 0;
}

ul {
    display: flex;
    justify-content: flex-start;
    list-style-type: none;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
}

ul > li {
    width: 15rem;
    height: 15rem;
    order: 2;
}

ul > li.active {
    width: 30rem;
    height: 30rem;
    order: 1;
}

I have some javascript that cycles through the <li> tags and adds the .active class. Using order: 1 I can move the currently active image to the first spot (the double-sized version).

chovy
  • 72,281
  • 52
  • 227
  • 295
  • Maybe it will help you. I always use this if I have problems with felxbox. Now I have no time to write answer: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – vaso123 Apr 03 '17 at 07:40
  • You can't reflow flex items like that in a proper way. If you tell what should happen on smaller screen widths we can provide a good answer – Asons Apr 03 '17 at 07:44
  • Do really need to use flex? you can achieve this otherwise too. – Gurtej Singh Apr 03 '17 at 07:44
  • related: [Make a calculator keypad layout with flexbox](http://stackoverflow.com/q/39079773/3597276) – Michael Benjamin Apr 03 '17 at 15:07

1 Answers1

-2

I don' really know about flex, but you can do this with 'float'

ul, li {
    padding: 0;
    margin: 0;
}

ul {
}

ul > li {
    width: 50px;
    height: 50px;
    background-color: black;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left
}

ul li:nth-child(1) {
    width: calc( 50px * 2 + 5px);
    height: calc( 50px * 2 + 5px);
}

https://jsfiddle.net/vcqp8an6/

Yudi Chang
  • 428
  • 7
  • 17
  • float is like tables now. Learn flex. – chovy Apr 03 '17 at 08:02
  • I did use flex in some case if there's an opportunity, but if you're stucked with client that insist older IE support, then no choice. – Yudi Chang Apr 03 '17 at 08:16
  • I think float has many problems , (in the siblings) and lot of clearance is needed , also it does not meant for alignment, where flex does, so just go and learn flex – Ohad Sadan Apr 11 '21 at 07:44