UIT_Final_Project/FlexBox-Notes.txt at SynchroWork · AchrafSL/UIT_Final_Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
display:flex; // in the parent
flex-direction: (row/column)-(reverse)
flex-wrap: (wrap/nowrap/wrap-reverse)

row ->  like display inline-block;
column -> like dislay block;

flex-flow: flex-direction flex-wrap;
example :
flex-flow : row wrap;

justify-content: | column -> Y axis
    (flex-start / flex-end / center / space-between / space-around / space-evenly)

if flex-direction == row
    justify-content -> X axis
    align-items -> Y
    align-content -> Y

if flex-direction == column
    justify-content -> Y axis
    align-items -> X
    align-content -> X

align-content -> {
    wrap option should exist ;
    align all the content (including the wrapped items) ;

    (flex-start / flex-end / center / stretch / space-between / space-around)  ;

    the space-between and space-around here is the space between the wrapped items;
}

align-items -> {
    it can work without wrap option ;

    (flex-start / flex-end / center / stretch ) ;

    when we have wrapped items it does work like align-content:space-around;

    }


gap: ..px;
-> space between items
---------------------------------------------------------------------

align-self: (like align items but with childs)
    (flex-start / flex-end / center / stretch ) ;

order: (0,.....) can take negative values
0 default
for example item1 with order 0
            item2 with order 2
            item3 with order 0
            item4 with order 1
            the reuslts will be :  item1 item3 item4 item2


flex-grow:  default 0
            1 means the empty space will be distributed to the items who have this value

for example: there is 100px impty;
item1 : have 1
item2 : have 2
and others is 0; it will be distributed like this 1:2
-> 1/3 * 100px to item1
-> 2/3 * 100px to item2


flex-shrink: (when the sceen get shrinked what happen ? with this u can specify)
default 1;
flex-shrink = 0; mean this item we dont want it to shrink

so the values is the order of importances witch one have the priority to shrink
for example : item1 : 3
              item2 : 2
              item3 : 0

              so the we shrink the screen item1 will be shrinked first after that we have item2 and the
              last one is item3


flex-basis: (like width when direction is row) / (like height when direction is column)


shortcut: flex: flex-grow flex-shrink flex-basis;

for example |  flex: 1 0 200px;