/* Styles for the parent container */
.parent {
/* Direction of the main axis */
flex-direction: column;
/* Spacing between items along the main axis */
justify-content: space-evenly;
/* Alignment of items along the cross axis */
align-items: flex-start;
/* How items should wrap if they exceed the container */
flex-wrap: wrap;
/* Alignment of wrapped lines along the cross axis */
align-content: flex-start;
/* Spacing between child elements */
gap: 1em;
}
/* Styles for the child items */
.child {
/* Ability of a flex item to grow */
flex-grow: 1;
/* Ability of a flex item to shrink */
flex-shrink: 0;
/* Initial size of a flex item */
flex-basis: 0;
/* Shorthand for flex-grow, flex-shrink, and flex-basis */
flex: 1;
/* Alignment of a single item along the cross axis */
align-self: baseline;
/* Order of appearance */
order: -1;
}
Basic concepts of flexbox - CSS: Cascading Style Sheets | MDN
Top comments (0)