Use the align-content property to modify the behavior of the flex-wrap property.ExampleYou can try to run the following code to implement the flex-wrap property −Live Demo                    .mycontainer {             display: flex;             background-color: orange;             align-content: space-between;             height: 150px;             width: 600px;             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          

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

To position text to bottom left, use the bottom and right property. You can try to run the following code to position text to bottom right on an image:ExampleLive Demo                    .box {             position: relative;          }          img {             width: 100%;             height: auto;             opacity: 0.6;          }          .direction {             position: absolute;             bottom: 10px;             right: 19px;             font-size: 13px;          }                     Heading One       Below image has text in the bottom right:                          Bottom Right Corner          

The following are the CSS flex container properties flex-direction flex-wrap flex-flow justify-content align-items align-content

Use the align-items property to align the flex items.ExampleYou can try to run the following code to implement the align-items property −Live Demo                    .mycontainer {             display: flex;             background-color: orange;             align-items: center;             height: 150px;             width: 600px;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

You can try to run the following code to set button on an image:ExampleLive Demo                    .box {             position: relative;             width: 100%;             max-width: 250px;          }          .box img {             width: 100%;             height: auto;          }          .box .btn {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);          }                                        Button          

Variables in CSS are used to add custom property values to your web page. Set a custom name of the property and set value for it.You can try to run the following code to implement variables in CSS to change the background and text colorExampleLive Demo                    :root {             --my-bg-color: blue;             --my-color: white;          }          #demo {             background-color: var(--my-bg-color);             color: var(--my-color);          }                     Heading One       This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text. This is demo text. This is demo text.          This is demo text. This is demo text.                

The grid-template-rows property is used to set the number of rows in the Grid.ExampleYou can try to run the following code to implement the grid-template-rows property −Live Demo                    .container {             display: grid;             background-color: blue;             grid-template-rows: 70px 190px;             padding: 20px;             grid-gap: 20px;          }          .container > div {             background-color: orange;             border: 2px solid gray;             padding: 35px;             font-size: 30px;             text-align: center;          }                     Game Board                1          2          3          4          5          6          

Use the columns property to set columns with CSS. You can try to run the following code to implement the columns property:ExampleLive Demo                    .demo {             column-rule-color: gray;             columns: 100px 4;             column-rule-style: dashed;          }                              This is demo text. This is demo text. This is demo text. This is demo text.         ... Read More

Use the column-width property to specify the width of the columns. You can try to run the following code to implement the column-width property −ExampleLive Demo                    .demo {             column-count: 4;             column-rule-color: gray;             column-rule-style: dashed;             column-width: 100px;          }                              This is demo text. This is demo text. ... Read More