Flex layout is also called flexible layout.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } at the{ width: 50px; height: 50px; background: #18A15E; display: inline-block; } </style> </head> <body> <div class="wrap"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
The result of running this code is as follows:
We will find that li uses display:inline-block; there will be margins between li, how to eliminate those margins? The answer is to use flex layout on the parent container of the li.
code show as below:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul { display: flex; } at the{ width: 50px; height: 50px; background: #18A15E; display: inline-block; } </style> </head> <body> <div class="wrap"> <ul> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html>
We used the style display:flex; on the ul
At this point, the margin between li disappears.