Web Development Articles - Page 763 of 1049

To set the style of the rule between columns, use the column-rule-style property. You can try to run the following code to implement the column-rule-style property.ExampleLive Demo                    .demo {             column-count: 4;             column-gap: 50px;             column-rule-color: maroon;             column-rule-style: dashed;          }                              This is demo text. This is demo ... Read More

Use the justify-content property with value space-around to add space between the flex-items.You can try to run the following code to implement the space-between valueExampleLive Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: space-between;          }          .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 :hover selector to add hover effect. To give a rounded effect, use the border-radius property. You can try to run the following code to set rounded active and hover button with CSS:ExampleLive Demo                    .demo {             display: inline-block;          }          .demo a {             color: red;             padding: 5px 12px;             text-decoration: none;             border-radius: 5px;          }          .demo a.active {             background-color: orange;             color: white;             border-radius: 5px;          }          .demo a:hover:not(.active) {             background-color: yellow;          }                     Our Quizzes                          

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