CSS Flecbox: flex-wrap
flex-wrap is a CSS property that controls whether flex items are forced onto a single line or can wrap onto multiple lines within a flex container. Syntax See the Pen Flexbox: flex-wrap by majadc (@majadc) on CodePen. Related Resources
CSS Flexbox: flex-direction
The flex-direction property controls the directions of main axis of a flex container, with the cross axis being perpendicular to it. This property also allows flex items to be rearranged in either the reverse or the default order. The flex-direction property is applied to the flex parent, i.e. the element with display: flex or display: […]
CSS Flexbox: align-content
The align-content property in CSS Flexbox is used to align multiple rows of flex items along the cross axis of the container (vertically if the flex-direction property is set on row). It applies only when flex-wrap property is set to wrap. stretch 1 2 3 4 5 6 7 8 9 10 11 12 13 […]
CSS Flexbox: align-items
The align-items property in CSS Flexbox is used to control how flex items are positioned along the cross axis of the flex container (vertically if the flex-direction property is set on row). stretch (default) 1 2 3 4 5 6 7 8 9 10 11 12 flex-start 1 2 3 4 5 6 7 8 […]
CSS Flexbox: justify-content
The justify-content property controls how items are positioned along the main axis (horizontally – if flex-direction property is set on row). This property is applied to the flex-items after margins and flex-grow values are calculated. Syntax margin: auto However, if any flex-item has an auto margin on the main axis the justify-content property will have […]
Blend modes allow you to blend colors from two or more layers, which can be background images or background colors. This CSS data type can be used in the background-blend-mode and mix-blend-mode properties. Syntax Blend modes Darken type multiply darken color-burn Lighten type screen lighten color-doge Contrast type overlay hard-light soft-light Composite type hue saturation […]
The CSS radial-gradient is used to draw a background image that represents smooth transitions between colors in in a circular or elliptical shape.
The CSS linear-gradient is used to draw a background image that represents smooth transitions between colors along a straight line.
It is possible to apply multiple backgrounds to an element including images and gradients.
The Sticky Header & Footer
The page layout includes header and footer elements that do not scroll with the rest of the page. The “sticking” effect is achieved by applying the CSS property position: sticky to these elements. By setting the top: 0 value for the header and bottom: 0 for the footer, they are positioned at the top and […]