CSS Flex-Box包装但避免区域

Question

I have a div that uses flex and wraps the items...

#container
{
    display: flex;
    flex-wrap: wrap;
}

The items wrap to the next row when they reach the end of the container. I need a region which the items will also wrap around. Here is an example of what I want...

The items(grey) wrap the the next row when they reach the region(red).

I am wondering if this possible to do using flex-box.

Thank you.

Answer 1

Check out this proof-of-concept which uses CSS Grid Layout . You can skip a region in the grid by using a pseudo element that is empty and is explicitly placed to create the effect that wrapped elements flow around it.

See demo below:

 .grid { display: grid; grid-gap: 10px; grid-template-columns: repeat(6, [col-start] 1fr); } .grid>* { background-color: green; height: 60px; display: flex; justify-content: center; align-items: center; } .grid:after { content: ''; grid-row: 1; /* row 1 */ grid-column: 4/7; /* skip columns 4 to 6 */ border: 1px dashed #ddd; } 

 <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> </div>