css flex box

1. Eng. Anas Alpure
‫الدرس‬
‫عشر‬ ‫الحادي‬
(11)

2. FLEXBOX
‫المهندس‬
:
‫البيور‬ ‫أنس‬

3. • flex-direction
• flex-wrap
• flex-flow
• justify-content [flex-start,flex-end,center, space-*]
• align-items [stretch ,flex-start,flex-end,center]
• align-content (wrap) [stretch,flex-start,flex-end,center, space-*]
Properties for the Parent

4. .row{
display: flex;
display: inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
}
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: column wrap;
‫مكرر‬

5. justify-content: flex-start | flex-end | center | space-
between | space-around | space-evenly ;
‫المهندس‬
:
‫البيور‬ ‫أنس‬

6. align-items: stretch | flex-start | flex-end | center ;

7. align-content: flex-start | flex-end | center | space-between | space-around |
space-evenly | stretch ;
‫المهندس‬
:
‫البيور‬ ‫أنس‬

8. Properties for the Children
(flex items)
• order
• flex-grow
It accepts a unitless value
• flex-shrink
It accepts a unitless value
• flex-basis
• Flex
• align-self

9. ‫المهندس‬
:
‫البيور‬ ‫أنس‬