Open In App

How to make container shrink-to-fit child elements as they wrap?

Improve
Improve
Like Article
Like
Save
Share
Report

A Flexible Layout must have a parent element having display property set to flex. Direct child elements of the flexible container automatically become flexible items.

Approach:

  • The element below represents a flex container with four flex items.




    <div id="container">
        <ul>
            <li>icecream</li>
            <li>sandwich</li>
            <li>juice</li>
            <li>coldrink</li>
               </ul>
    </div>

    
    

  • Parent Element (Container)

    The flex container becomes flexible by making the display property to flex:




    .flex-container {
      display: flex;
    }

    
    

  • The flex-wrap Property

    The flex-wrap property states whether the flex items should wrap or not.




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

    
    

    It wraps value specifies that the flex items will wrap if necessary

  • Text Alignment

    The text-align property sets the horizontal alignment of a text. A text can be left or right-aligned, centered, or justified.




    h1 {
      text-align: center;
    }
      
    h2 {
      text-align: left;
    }
      
    h3 {
      text-align: right;
    }

    
    

  • CSS Setting height and width

    The height & width properties are used to set the height & width of an element.




    div {
      height: 500px;
      width: 50%;
    }

    
    

  • CSS Padding

    The CSS padding property is used to generate space around an element, inside borders.




    div {
      padding-top: 100px;
      padding-right: 50px;
      padding-bottom: 1000px;
      padding-left: 100px;
    }

    
    

  • CSS Margins

    The CSS margin property is used to create space around elements, outside borders.




    p {
      margin-top: 100px;
      margin-bottom: 100px;
      margin-right: 150px;
      margin-left: 80px;
    }

    
    

Example:




<!DOCTYPE html>
<html>
<head>
<style>
ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: 5px solid green;
}
  
li {
    list-style-type: none;
    border: 1px solid gray;
    margin: 15px;
    padding: 5px;
    width: 200px;
    text-align: center;
}
</style>
<body>
<div id="container">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <p> Geeks for Geeks </p>
</div></body>
</html>    


Output:



Last Updated : 23 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads