Use the align-items property with value flex-end to align flex items on the bottom.You can try to run the following code to implement the flex-end value:ExampleLive Demo                    .mycontainer {             display: flex;             height: 300px;             background-color: red;             align-items: flex-end;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

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

Use the justify-content property to horizontally align the flex items when the items do not use all available space on the main-axis.You can try to run the following code to implement the justify-content propertyExampleLive Demo                    .mycontainer {             display: flex;             background-color: blue;             justify-content: center;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Q1          Q2          Q3          Q4          

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.