Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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 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-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
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
To set the triangle at the center and at the bottom of div, use the following. You need to set left to 50% −.demo: after { position: absolute; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; top: 100%; left: 50%; margin-left: -50px; width: 0; height: 0; }