删除列表项左侧的空间

Question

 ul { display: flex; flex-wrap: wrap; width: 45%; height: 40%; border: 1px solid red; list-style: none; margin: 0 auto; } ul li { flex: 1; } 

 <ul> <li><img src="images/yellow.gif" alt="Yellow"></li> <li><img src="images/orange.gif" alt="Orange"></li> <li><img src="images/purple.gif" alt="Purple"></li> <li><img src="images/blue.gif" alt="Blue"> </li> <li><img src="images/pink.gif" alt="Pink"> </li> <li><img src="images/green.gif" alt="Green"> </li> <li><img src="images/black.gif" alt="Black"> </li> <li><img src="images/gray.gif" alt="Gray"> </li> <li><img src="images/red.gif" alt="Red"> </li> </ul> 

---

Actual output

As per the actual output, there is left-margin on inspecting ul element, as shown below,

---

there is also right-margin on inspecting li element, as shown below

---

Expected output

1) Why these margin space exist?

2) How to avoid these margin space?

Answer 1

The whitespace on the left is caused by the default padding on the ul . Remove it with:

ul { padding-left: 0; }

Note that some browsers may use margin instead of padding for this indentation.

The whitespace on the right is caused by the flex-wrap property. When flex items wrap, the container does not recalculate its width to shrink-wrap the new layout.

By re-sizing the window horizontally, you'll see the right spacing come and go in this demo .

Here are some more details and a possible workaround:

• Make container shrink-to-fit child elements as they wrap
• How to center a flex container but left-align flex items

Answer 2

ul by default has padding , so remove it:

 img { display: block /*fix inline gap */ } ul { display: flex; flex-wrap: wrap; width: 50%; /*changed */ height: 40%; border: 1px solid red; list-style: none; margin: 0 auto; padding: 0 } ul li { flex:1; } 

 <ul> <li> <img src="http://placehold.it/100/ff0" alt="Yellow"> </li> <li> <img src="http://placehold.it/100/f90" alt="Orange"> </li> <li> <img src="http://placehold.it/100/c6f" alt="Purple"> </li> <li> <img src="http://placehold.it/100/06c" alt="Blue"> </li> <li> <img src="http://placehold.it/100/fcf" alt="Pink"> </li> <li> <img src="http://placehold.it/100/0f0" alt="Green"> </li> <li> <img src="http://placehold.it/100/000" alt="Black"> </li> <li> <img src="http://placehold.it/100/666" alt="Gray"> </li> <li> <img src="http://placehold.it/100/f00" alt="Red"> </li> </ul> 

NOTE : In this snippet above you will have, at same point, the desired output, but as pointed out by Michael_B :

When the flex items wrap, the container does not recalculate its width to perfectly shrink-wrap the new layout.

So If I was you I would try another approach.

Answer 3

Browsers put a certain amount of padding on ul 's (Chrome adds 40px to the left). You can override this by adding padding: 0 to the ul : https://jsfiddle.net/2ocbyhdc/

ul{
    display: flex;
    flex-wrap: wrap;
    width: 45%;
    height: 40%;
    border: 1px solid red;
    list-style: none;
    margin: 0 auto;
    padding: 0;
}

Answer 4

Setting padding: 0; on the list helps:

 ul { display: flex; flex-wrap: wrap; width: 300px; border: 1px solid red; list-style: none; margin: 0 auto; padding: 0; } ul li { display: flex; flex-grow: 1; } ul li img { flex-grow: 1; } 

 <ul> <li><img src="https://dummyimage.com/100x100/ffff00/000" alt="Yellow"></li> <li><img src="https://dummyimage.com/100x100/FFA500/000" alt="Orange"></li> <li><img src="https://dummyimage.com/100x100/800080/fff" alt="Purple"></li> <li><img src="https://dummyimage.com/100x100/0000FF/fff" alt="Blue"></li> <li><img src="https://dummyimage.com/100x100/FF69B4/fff" alt="Pink"></li> <li><img src="https://dummyimage.com/100x100/006600/fff" alt="Green"></li> <li><img src="https://dummyimage.com/100x100/000000/fff" alt="Black"></li> <li><img src="https://dummyimage.com/100x100/cccccc/000" alt="Gray"></li> <li><img src="https://dummyimage.com/100x100/ff0000/fff" alt="Red"></li> </ul>