Flexbox defaults to aligning element horizontally.
Basic structure is container with elements inside them.
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
/* Other values: flex-start flex-end center space-around
space-between space-evenly */
}
flex-direction : can be row horizontal or column vertical.
The main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it.
justify-content : layout of elements along the main axis.
align-items : layout of elements along the cross axis.
align-self : used in elements to overwride align-items in parent.
flex-wrap : wether or not elements wrap to new column or row.
flex is shorthand for flex-grow, flex-shrink, and flex-basis.
flex-grow : Relative to other elements how fast the element grows after passing the flex-basis size.
flex-shrink : Relative to other elements how fast the element shrinks after passing the flex-basis size.
flex-basis : The base size of the element.
order : default value is 0, the order of the elements on the main axis. Value of -1 sets the element forward, while a value of 1 sets the element backward.
align-content
Move all elements to the right, except the first one, which should be on the right. Using auto for margin-right and margin-left.
.container {
border: 5px solid #ffcc5c;
display: flex;
justify-content: flex-end;
}
.home {
margin-right: auto;
}
flex property makes element grow and shrink on resize.
.container {
border: 5px solid #ffcc5c;
display: flex;
}
.home {
flex: 1;
}
.logout {
flex: 1;
}
div inside div using flex.container {
display: flex;
height: 100%;
align-items: center; /* vertical alignment */
justify-content: center; /* horizontal alignment */
}