Increase the size of a flex item, using the flex-grow property. Use it with one or more than flex items.ExampleYou can try to run the following code to implement the flex-grow property. Here Q3 flex-item is larger than other items −Live Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          

Use the align-content property with value flex-end to set the flex lines in the end.ExampleYou can try to run the following code to implement the flex-end valueLive Demo                    .mycontainer {             display: flex;             height: 200px;             background-color: blue;             align-content: flex-end;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                       Queue                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          

The majority of developers and designers employed various methods to produce responsive and flexible layouts prior to the release of the Flexbox layout concept. These methods consist of tables, and floats. Although one can still use these methods, most designers now use the Flexbox model. Users can arrange and organize their webpages either vertically or horizontally with CSS flexbox, which results in visually attractive and easily navigable websites. Flexbox is actually a CSS layout module rather than just a property. In this article we are going to learn about how to avoid wrapping flex items with CSS, this can be ... Read More

Use the justify-content property with value space-between to add space between the lines.ExampleYou can try to run the following code to implement the space-between value −Live Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: space-between;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

To wrap the flex items, use the flex-wrap property. You can try to run the following code to implement the flex-wrap propertyExampleLive Demo                    .mycontainer {             display: flex;             background-color: #D7BDE2;             flex-wrap: wrap;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          Q7          Q8          Q9          

The nav-left property is used to move left when you have pressed on left arrow button in keypad. You can try to run the following code to implement the CSS nav-left propertyExampleLive Demo                    button {             position: absolute;          }          button#btn1 {             top: 10%;             left: 15%;             nav-index: 1;             nav-right: #btn2;             nav-left: #btn4;             nav-down: #btn2;             nav-up: #btn4;          }          button#btn2 {             top: 30%;             left: 30%;             nav-index: 2;             nav-right: #btn3;             nav-left: #btn1;             nav-down: #btn3;             nav-up: #btn1;          }          button#btn3 {             top: 50%;             left: 15%;             nav-index: 3;             nav-right: #btn4;             nav-left: #btn2;             nav-down: #btn4;             nav-up: #btn2;          }          button#btn4 {             top: 30%;             left: 0%;             nav-index: 4;             nav-right: #btn1;             nav-left: #btn3;             nav-down: #btn1;             nav-up: #btn3;          }                     Result1       Result2       Result3       Result4    

Use the flex-direction property with row-reverse value to set the flex-items horizontally from right to left.ExampleYou can try to run the following code to implement the row-reverse valueLive Demo                    .mycontainer {             display: flex;             flex-direction: row-reverse;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6          

Use the grid-auto-rows property to set size for the rows.ExampleYou can try to run the following code to implement the grid-auto-rows property −Live Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }                              1          2          3          4          5          6          

Set where to start the grid-items with CSS grid-row-start property.You can try to run the following code to implement the grid-row-start propertyExampleLive Demo                    .container {             display: grid;             grid-auto-rows: 50px;             grid-gap: 10px;             background-color: red;             padding: 10px;          }          .container>div {             background-color: yellow;             text-align: center;             padding:10px 0;             font-size: 20px;          }          .ele1 {             grid-row-start: 2;          }                              1          2          3          4          5          6          

Use the flex-direction property with column-reverse value to set the flex-items vertically, from top to bottomExampleYou can try to run the following code to implement the column-reverse value −Live Demo                    .mycontainer {             display: flex;             flex-direction: column-reverse;             background-color: orange;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          Q5          Q6