Tag: flexbox

  • 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

    Read more

    Posted in CSS

  • 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: […]

    Read more

    Posted in CSS

  • 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 […]

    Read more

    Posted in CSS

  • 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 […]

    Read more

    Posted in CSS

  • 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 […]

    Read more

    Posted in CSS