Front End Technology Articles - Page 622 of 860

Use the flex-direction property with row value to set the flex-items horizontally.You can try to run the following code to implement the row valueExampleLive Demo                    .mycontainer {             display: flex;             flex-direction: row;             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 flex property to add flex-grow, flex-shrink and flex-basis properties in a single line.You can try to run the following code to implement the flex propertyExampleLive Demo                    .mycontainer {             display: flex;             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          Q7          Q8          Q9          

Use the flex-direction property with column value to set the flex-items verticallyYou can try to run the following code to implement the column value:ExampleLive Demo                    .mycontainer {             display: flex;             flex-direction: column;             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 order property to specify the order of a flexible item relative to the rest of the flex items inside the same container.ExampleYou can try to run the following code to implement the order 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 flex-flow property to set the flex-direction and flex-wrap property in a single property. You can try to run the following code to implement the flex-flow propertyExampleLive Demo                    .mycontainer {             display: flex;             background-color: orange;             flex-flow: column 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          

Use the align-content property to align the flex lines. You can try to run the following code to implement the align-content property:ExampleLive Demo                    .mycontainer {             display: flex;             background-color: RED;             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          

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