CSS Flexbox布局-3列和2列互换

Question

Can anyone help me with this layout using Flexbox. I need a layout that repeats from 3 columns to 2 columns and then back to 3 columns. Ive added an image below as to what I mean.

Answer 1

You can use double flex size on each nth-child(10n + 4) and nth-child(10n + 10) items.

 .grid { display: flex; flex-wrap: wrap; } .item { flex: calc(33.33% - 10px); height: 70px; margin: 5px; background: #BD1522; } .item:nth-child(10n + 4), .item:nth-child(10n + 10) { flex: calc(66.66% - 10px); } 

 <div class="grid"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>