Menu
So what you would do is use grid-gap for spacing between the items. Then use padding for the same spacing between the items and the container. The last row margin problem is eliminated.
To accomplish this we need to: Set flex-wrap: wrap on the container (or all items would be rendered on a single row) Set justify-content: space-between on the container, to only create space between the elements (and not between the edge of the parent element and items)
You have to remove overflow-x: hidden; from html,boy leave default value. flex-wrap: 100vh; is wrong it should be flex-wrap: wrap | nowrap; read flex-wrap.
In fact, all major browsers consider pseudo-elements on a flex container to be flex items. Knowing that, add ::before and ::after to your container. With justify-content: space-between and zero-width pseudo-elements, the visible flex items will appear evenly spaced.
An initial setting of a flex container is align-content: stretch.
This means that multiple lines of flex items will be distributed evenly along the cross axis.
To override this behavior, apply align-content: flex-start to the container.
When you're working in a single-line flex container (i.e., flex-wrap: nowrap), the properties to use to distribute space along the cross axis are align-items and align-self.
When you're working in a multi-line flex container (i.e., flex-wrap: wrap) – like in the question – the property to use to distribute flex lines (rows / columns) along the cross axis is align-content.
From the spec:
8.3. Cross-axis Alignment: the
align-itemsandalign-selfproperties
align-itemssets the default alignment for all of the flex container’s items, including anonymous flex items.align-selfallows this default alignment to be overridden for individual flex items.8.4. Packing Flex Lines: the
align-contentpropertyThe
align-contentproperty aligns a flex container’s lines within the flex container when there is extra space in the cross-axis, similar to howjustify-contentaligns individual items within the main-axis. Note, this property has no effect on a single-line flex container.
The align-content property takes six values:
flex-startflex-endcenterspace-betweenspace-aroundstretchHere's the definition for stretch:
stretchLines stretch to take up the remaining space. If the leftover free-space is negative, this value is identical to
flex-start. Otherwise, the free-space is split equally between all of the lines, increasing their cross size.
In other words, align-content: stretch on the cross axis is similar to flex: 1 on the main axis.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With