Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 23 Jun, 2020
Geek Week

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.


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

    <div id="container">
  • 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;


<!DOCTYPE html>
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;
<div id="container">
    <p> Geeks for Geeks </p>


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

My Personal Notes arrow_drop_up
Recommended Articles
Page :