Tag: flex
-
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 […]
-
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 […]
-
Flex – margin: auto
The CSS rule margin: auto; centers the flex children horizontally and vertically.
-
align-self
The align-self property controls how an item is aligned on the cross axis within a flex container. This property will override the align-items property value set on the parent container. However, if the item has an auto margin set on the cross axis, the align-self property will be ignored. See the Pen Untitled by majadc […]
-
order
Example 1 .flex-item-3 { order: -1 } Example 2 .flex-item-1 {order: 3;} .flex-item-2 {order: 4;} .flex-item-3 {order: 2;} .flex-item-4 {order: 1;}