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-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; }
The last-child selector is used to select the last child element of a parent. It cannot be used to select the last child element with a specific class under a given parent element.Style the last child li element with background-color −li:last-child{ background-color: blue; }It creates issues if the element is not the very last element.Let us see an example of −If your selector is a:last-child, this works − This will be selected
Ember.js is an open-source, free JavaScript client-side framework used for developing web applications.It allows building client-side JavaScript applications by providing a complete solution which contains datamanagement and application flow.It uses the MVC(Model-View-Controller) architecture pattern. In Ember.js, the route is used as a model,handlebar template as view and controller manipulates the data in the model.The following browsers are supported for Ember −Internet ExplorerMicrosoft EdgeSafari