- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Jennifer Nicholas](https://www.tutorialspoint.com/assets/profiles/13569/profile/60_88876-1512715262.jpg)
1K+ Views
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
![Arjun Thakur](https://www.tutorialspoint.com/assets/profiles/13574/profile/60_74441-1560315595.jpg)
79 Views
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
![Chandu yadav](https://www.tutorialspoint.com/assets/profiles/22330/profile/60_142811-1519038104.jpg)
127 Views
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
![Anvi Jain](https://www.tutorialspoint.com/assets/profiles/13591/profile/60_98631-1512716973.jpg)
82 Views
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
![Daniol Thomas](https://www.tutorialspoint.com/assets/profiles/13551/profile/60_130035-1512726078.jpg)
111 Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
162 Views
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
![Vrundesha Joshi](https://www.tutorialspoint.com/assets/profiles/13566/profile/60_88163-1512715024.jpg)
341 Views
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
![Vrundesha Joshi](https://www.tutorialspoint.com/assets/profiles/13566/profile/60_88163-1512715024.jpg)
88 Views
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
![George John](https://www.tutorialspoint.com/assets/profiles/13511/profile/60_58410-1512537824.png)
176 Views
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
![Ankith Reddy](https://www.tutorialspoint.com/assets/profiles/22328/profile/60_142162-1519038074.jpg)
91 Views
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