Use the flex-wrap property with wrap-reverse value to wrap flex-items in reverse order.ExampleYou can try to run the following code to implement the wrap-reverse valueLive Demo                    .mycontainer {             display: flex;             background-color: #D35400;             flex-wrap: wrap-reverse;          }          .mycontainer > div {             background-color: white;             text-align: center;             line-height: 40px;             font-size: 25px;             width: 100px;             margin: 5px;          }                     Quiz                Ans1          Ans2          Ans3          Ans4          Ans5          Ans6          Ans7          Ans8          Ans9          

To implement animation on the color property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 200px;             height: 300px;             background: white;             border: 10px solid red;             animation: myanim 3s infinite;             bottom: 30px;             position: absolute;          }          @keyframes myanim {             20% {                bottom: 100px;                box-shadow: 30px 45px 70px orange;                color: blue;             }          }                     Performing Animation on color property       This is our demo div!    

To implement animation on the border-top-right-radius property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 2px solid black;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-spacing: 50px;                border-top-color: red;                border-top-right-radius: 150px;             }          }                     Performing Animation for border top right radius                             Subject             Student             Marks                                 PHP             Tom             90                                 Java             Henry             70                    

Use the repeating-radial-gradient() function to repeat radial gradient.You can try to run the following code to implement repeating-radial-gradient() function in CSSExampleLive Demo                    #demo {             height: 300px;             background: repeating-radial-gradient(green 20%, orange 40%, maroon 40%);          }                     Repeating radial gradient          

Use the justify-content property with value flex-start to align the flex-items at the beginning.You can try to run the following code to implement the flex-start valueExampleLive Demo                    .mycontainer {             display: flex;             background-color: red;             justify-content: flex-start;          }          .mycontainer > div {             background-color: orange;             text-align: center;             line-height: 60px;             font-size: 30px;             width: 100px;             margin: 5px;          }                     Result                Rank1          Rank2          Rank3          Rank4          

To implement animation on the border-spacing property with CSS, you can try to run the following codeExampleLive Demo                    table,th,td {             border: 1px solid green;          }          #newTable {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: orange;                border-right-color: red;                border-right-width: 25px;                border-spacing: 50px             }          }                     Performing Animation for border spacing                             Subject             Student             Marks                                 Maths             Amit             98                                 Science             Sachin             99                    

To implement animation on border-right-width property with CSS, you can try to run the following codeExampleLive Demo                    div {             width: 500px;             height: 300px;             background: yellow;             border: 15px solid yellow;             background-image: url('https://www.tutorialspoint.com/latest/cuda.png');             animation: myanim 3s infinite;             background-position: bottom left;             background-size: 50px;          }          @keyframes myanim {             30% {                background-color: maroon;                border-right-color: red;                border-right-width: 25px;             }          }                     Performing Animation for border right width              

To define colors using the Hue-Saturation-Lightness model (HSL) with Opacity, use the hsla() CSS method.ExampleYou can try to run the following code to implement the hsla() function in CSSLive Demo                    h1 {             background-color:hsl(0,100%,50%);          }          h2 {             background-color:hsl(192,89%,48%);          }          p {             background-color:hsla(290,100%,50%,0.3);          }                     Red Background       Blue Background       This is demo text!    

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

Use the align-items property with value center to align flex items in the middle.ExampleYou can try to run the following code to implement the center valueLive 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