Scribd Logo
Upload

Welcome to Scribd!

  • 330 views

    Css Flexbox

    Uploaded by

    Ishaan Khandelwal
    The document discusses CSS Flexbox, including defining a flex container and its properties like flex-direction, flex-wrap, justify-content, and align-items. It also covers flex item properties like order, flex-grow, flex-shrink, and align-self. The document ends with assigning builds of layouts using flexbox like a pricing page, image left with text right, profiles display, and what is offered.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Css Flexbox

    Uploaded by

    Ishaan Khandelwal
    330 views6 pages
    The document discusses CSS Flexbox, including defining a flex container and its properties like flex-direction, flex-wrap, justify-content, and align-items. It also covers flex item properties like order, flex-grow, flex-shrink, and align-self. The document ends with assigning builds of layouts using flexbox like a pricing page, image left with text right, profiles display, and what is offered.

    Original Description:

    Original Title

    6._css_flexbox_

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document discusses CSS Flexbox, including defining a flex container and its properties like flex-direction, flex-wrap, justify-content, and align-items. It also covers flex item properties like order, flex-grow, flex-shrink, and align-self. The document ends with assigning builds of layouts using flexbox like a pricing page, image left with text right, profiles display, and what is offered.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    330 views6 pages

    Css Flexbox

    Uploaded by

    Ishaan Khandelwal
    The document discusses CSS Flexbox, including defining a flex container and its properties like flex-direction, flex-wrap, justify-content, and align-items. It also covers flex item properties like order, flex-grow, flex-shrink, and align-self. The document ends with assigning builds of layouts using flexbox like a pricing page, image left with text right, profiles display, and what is offered.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 6

    6.

    CSS Flexbox

    Table of Content
    1. CSS Flexbox

    2. Mini Project (Resume)

    CSS Flexbox
    To start using the Flexbox model, you first need to define a flex container.
    Two axes of flexbox

    CSS Flex Container


    The flex container properties are:

    flex-direction

    6. CSS Flexbox 1
    The  flex-direction  property defines in which direction the container wants to
    stack the flex items.

    row

    column

    row-reverse

    column-reverse

    flex-wrap
    The flex-wrap property specifies whether the flex items should wrap or not.

    wrap

    no-wrap

    wrap-reverse

    flex-flow
    The flex-flow property is a shorthand property for setting both the flex-direction
    and flex-wrap properties.

    justify-content
    The justify-content property is used to align the flex items in main-axis

    center

    flex-start

    flex-end

    space-around

    space-between

    align-items

    The align-items property is used to align the flex items in cross-axis

    center

    flex-start

    flex-end

    6. CSS Flexbox 2
    stretch

    baseline

    align-content
    The align-content property is used to align the flex lines.

    center

    flex-start

    flex-end

    space-around

    space-between

    CSS Flex Children


    The flex item properties are:

    order
    The order property specifies the order of the flex items. The order value must
    be a number, the default value is 0.

    flex-grow

    The flex-grow property specifies how much a flex item will grow relative to the
    rest of the flex items. The value must be a number, the default value is 0.

    flex-shrink
    The flex-shrink property specifies how much a flex item will shrink relative to the
    rest of the flex items. The value must be a number, the default value is 1.

    flex-basis
    The flex-basis property specifies the initial length of a flex item.

    flex
    The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-
    basis properties.

    align-self

    6. CSS Flexbox 3
    The align-self property specifies the alignment for the selected item inside the
    flexible container.
    The align-self property overrides the default alignment set by the container's
    align-items property.

    Assignments
    Build these layouts

    1. Pricing page

    2. Image left, Text Right

    6. CSS Flexbox 4
    3. Profiles Display

    4. What do we offer

    6. CSS Flexbox 5
    6. CSS Flexbox 6

    You might also like