Make container shrink-to-fit child elements as they wrap in HTML

HTML Web Development Front End Technology

We can easily make container shrink-to-fit child elements as they wrap. First, we will set the flex container flexible −

display: flex;

We will set the flex items to wrap −

flex-wrap: wrap;

Set the text center aligned using the text-align property −

text-align: center;

The list-style-type property is set to None to display no marker −

list-style-type: none;

Example

Let us now see the complete example −


<!DOCTYPE html>
<html>
<title>Flex Example</title>
<head>
   <style>
      ul {
         display: flex;
         flex-wrap: wrap;
         margin: 0;
         padding: 0;
         border: 2px solid red;
      }
      li {
         border: 2px solid orange;
         margin: 10px;
         padding: 10px;
         width: 200px;
         text-align: center;
         list-style-type: none;
      }
   </style>
</head>   
<body>
   <div id="container">
      <ul>
         <li>A</li>
         <li>B</li>
         <li>C</li>
         <li>D</li>
         <li>E</li>
         <li>F</li>
         <li>G</li>
         <li>H</li>
      </ul>
   </div>
</body>
</html>

AmitDiwan

Updated on: 20-Nov-2023

925 Views

Kickstart Your Career

Get certified by completing the course

Get Started