CSS3 Flexbox
CSS allows us to design flexible responsive layout structure.
Flexible responsive layout structure using flexbox
Flex Box Properties :
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
display
Syntax :-
parent element{
display: flex;
property : values;
}
css3 flexbox example :-
#container{
display: flex;
flex-direction :row;
}
#container{
display: flex;
flex-wrap : nowrap;
}
CSS3 flexbox properties demo code :
p{
width:100px;
height:100px;
float: left;
border:10px solid violet;
background-color: lime;
margin:10px;
}
div{
float:left;
margin:10px;
}
#default{
display: flex;
background-color: aqua;
}
#direction{
display: flex;
background-color: royalblue;
flex-direction: column-reverse;
}
#wrap{
float: none;
display:flex;
background-color: firebrick;
flex-wrap: nowrap;
}
#flow{
float: none;
display:flex;
background-color: blueviolet;
flex-flow: row-reverse;
}
#justify{
float: none;
display:flex;
background-color: darkorange;
justify-content:space-between;
}
#align{
float: none;
height: 300px;
display:flex;
background-color: gold;
align-items: center;
}
