More actions
mNo edit summary |
mNo edit summary |
||
| (10 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
flex-direction: var(--template-flexbox-direction); | flex-direction: var(--template-flexbox-direction); | ||
--template-flexbox-columns: 3; /* Default columns count */ | --template-flexbox-columns: 3; /* Default columns count */ | ||
justify-content: var(--template-flexbox-justify); | |||
} | } | ||
| Line 17: | Line 18: | ||
flex-shrink: 0; /* Prevent shrinking */ | flex-shrink: 0; /* Prevent shrinking */ | ||
} | } | ||
.template-flexbox-item:last-child { | |||
margin-left: -135px; /* consider gap in this value, if applicable */ | |||
} | } | ||
.template-flexbox-item:nth-last-child(2) { | |||
margin-right: 135px; /* consider gap in this value, if applicable */} | |||
} | |||
Latest revision as of 01:41, 29 December 2024
/* Container for the flexbox */
.template-flexbox {
display: flex;
gap: var(--template-flexbox-gap); /* space between items */
flex-wrap: wrap;
flex-direction: var(--template-flexbox-direction);
--template-flexbox-columns: 3; /* Default columns count */
justify-content: var(--template-flexbox-justify);
}
/* Flex items */
.template-flexbox-item {
--template-flexbox-item-span: 1; /* Default span is 1 */
/* Adjust the width of each column by factoring in the gap */
--template-flexbox-item-width: calc((100% - (var(--template-flexbox-gap) * (var(--template-flexbox-columns) - 1))) / var(--template-flexbox-columns));
flex-basis: var(--template-flexbox-item-width); /* set the width of each column */
flex-grow: 0; /* Prevent growing */
flex-shrink: 0; /* Prevent shrinking */
}
.template-flexbox-item:last-child {
margin-left: -135px; /* consider gap in this value, if applicable */
}
.template-flexbox-item:nth-last-child(2) {
margin-right: 135px; /* consider gap in this value, if applicable */}