-3

I would like to build something really easy, which is sadly very complicated :-). I have a list. Every item needs 1/3 of the screen, so they are always three items side by side. But the first item needs 2/3 of the screen. It should just look like the picture. I don't want to nest the tags for this. Is this somehow possible with flexbox only (because it must work in ReactNative also)? I've tried everything, looked at the specifications from flexbox. but I can't make this work. Thanks for any help!

Here is the layout, how it should look like: layout

Kartikey
  • 4,516
  • 4
  • 15
  • 40
Szabolcs
  • 1
  • 1
  • 1
    ...but no, flexbox is not a good option here, CSS-Grid would be better. – Paulie_D Oct 16 '18 at 14:25
  • As @Paulie_D said you need to show us your own code and show you've at least tried to code this your self. You may find some answers here even help you with your query. – S4NDM4N Oct 16 '18 at 14:34
  • I have a ton of html and css where I tried this. But for me it looks like this simple layout is not possible with this "powerfull" flexbox – Szabolcs Oct 16 '18 at 14:40
  • If you need to use flexbox, try searching for masonry articles like this one: https://codeburst.io/how-to-pure-css-masonry-layouts-a8ede07ba31a (flexbox actually is pretty powerful) – jmcgriz Oct 16 '18 at 14:50
  • Thanks, I have looked the examples, but the examples have nested structures. Yes I know, flexbox is pretty powerfull but it's not possible to make a simple list, where the first elements is bigger than the others and to "float" the smaller elements around the first. – Szabolcs Oct 16 '18 at 15:20
  • I had to do the same what Szabolcs is trying. I did not manage it. Flexbox not so good for this case. – tomazahlin Oct 17 '18 at 13:02

2 Answers2

0

You can actually do this the old-fashioned way with float. As long as it's only your first element that needs to be arranged in that fashion, this method will work.

.container {
  width: 600px;
}
.container::after {
  content: '';
  display: block;
  clear: both;
}

.container > div {
  float: left;
  box-sizing: border-box;
  padding: 1px;
}
.inner {
  width: 100%;
  padding-bottom: 100%;
  background: black;
}
.one-third {
  width: 33.333333333%;
}
.two-thirds {
  width: 66.66666666%;
}
<div class="container">
<div class="two-thirds"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
<div class="one-third"><div class="inner"></div></div>
</div>
jmcgriz
  • 2,819
  • 1
  • 9
  • 11
  • Thank you. I need a solution with flexbox, because It has to run also in react-native. – Szabolcs Oct 16 '18 at 14:43
  • @Szabolcs Ah, well you should definitely add that information to your question, otherwise every answer you get is going to be "don't use flex" – jmcgriz Oct 16 '18 at 14:46
  • Sorry for that, I don't want to waste your time! But I would really like to know, if this simple example is possible with flexbox only. – Szabolcs Oct 16 '18 at 15:23
  • @Szabolcs no problem, just suggesting you update your question to include the fact that it's intended for react-native – jmcgriz Oct 16 '18 at 15:28
0

AFAIK, you will need a flex box for Box1+Box2/2 (between box2 and box2 another one with direction column). Another one for 3,4 and 5, and another one for 6,7,8.

Are you rendering the elements static or generating them dynamically? If you are trying to do it in a dynamic way, you probably are needing js to identify which box is bigger/smaller.

jnadev
  • 11
  • 2