Scribd Logo
Upload

Welcome to Scribd!

  • Web Lect 10

    Uploaded by

    Ali Shan
    9 views111 pages
    This document provides information about flex box properties in web engineering. It discusses why flex box is used instead of regular box flow, the key components of flex boxes including flex containers and items. It also outlines several important flex box properties such as display flex, flex direction, flex wrap, justify content, align items, flex flow, align self, flex basis, and flex grow that control the layout and positioning of flex items.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides information about flex box properties in web engineering. It discusses why flex box is used instead of regular box flow, the key components of flex boxes including flex containers and items. It also outlines several important flex box properties such as display flex, flex direction, flex wrap, justify content, align items, flex flow, align self, flex basis, and flex grow that control the layout and positioning of flex items.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views111 pages

    Web Lect 10

    Uploaded by

    Ali Shan
    This document provides information about flex box properties in web engineering. It discusses why flex box is used instead of regular box flow, the key components of flex boxes including flex containers and items. It also outlines several important flex box properties such as display flex, flex direction, flex wrap, justify content, align items, flex flow, align self, flex basis, and flex grow that control the layout and positioning of flex items.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 111

    Web Engineering

    Lect 10 (Flux Box)


    Instructor: Faheem Shaukat
    Meeting Hours
    Wednesday and Thursday
    12PM to 02PM
    Why We Use Flex Box
    Box Structure instead of flow
    Box Structure Instead of flow
    Two Things in Flex
    • Flex Container Flux Item
    Flux Container Properties
    • Display Flex will adjust all content in flow
    • Flex direction Row or Column
    Flex Wrap
    • Content sizing by material in it by auto width
    • Suppose we change width it will not effect
    • So we need flex wrap property to see effect
    Due to height content stretch
    Justify Content Property
    • Flex start
    • Flex end
    • Flex center
    • Space between
    • Space round
    Align Item
    • Justify content in row axis
    • It will be in in cross axis
    • By default its in stretch mode
    Flex Flow to Join different properties
    Flex properties on individual boxes/Items
    • Align Self
    Flex Basis
    • Initial length to main axis
    • Don’t need to use wrap
    Flex Grow

    You might also like