display flex items in a column? code example
Example 1: css flex vertical align
/* Answer to: "css flex vertical align" */
.box {
display: flex;
align-items: center; /* Vertical */
justify-content: center; /* Horizontal */
}
.box div {
width: 100px;
height: 100px;
}
/*
For more information go to:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
*/
Example 2: how to create seprate flex box for adding items into the box
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
width: 32%;
padding-bottom: 32%; /* Same as width, sets height */
margin-bottom: 2%; /* (100-32*3)/2 */
position: relative;
}