Devlog

How to use Flexbox basically

Let’s know default way how use flex attribute in css

1. Default setting

Firstly, we sould create the html code for testing.

flex.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
    </head>
    <body>
        <div class="parent">
            <div class="child1">
            </div>
            <div class="child2">
            </div>
            <div class="child3">
            </div>                
        </div>
    </body>
</html>

and let’s define background-color attribute and size attribute to know how flex attribute is operated.

flex.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
}

.child1 {
    width: 60px;
    height: 60px;
    background-color: #222222;
}

.child2 {
    width: 60px;
    height: 60px;
    background-color: #555555;
}

.child3 {
    width: 60px;
    height: 60px;
    background-color: #888888;
}

2. flex container, flex item

flex attribute is consist of two elements. the one is flex container and the other is flex item. their relation is parent-children as you guess.

to use flex attribute, you should define ‘display: flex‘ attribute in parent element (= flex container)

flex.css

1
2
3
4
5
6
7
8
9
10
11
12

...

.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
    display: flex;                  /* NEW CODE */
}

...

then the children element in parent can use flex attribute. and html basically render data from top to bottom but if you apply flex attribute, it will be change to horizontal.

3. flex-direction

flex attribute basically change aligning direction from left to right.

if you want to change it, you just modify flex-direction attribute. this attribute default value is row. to set aligning direction from top to bottom, change it to column.

1
2
3
4
5
6
7
8
9
10
11
12
13

...

.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
    display: flex;
    flex-direction: column;         /* NEW CODE */
}

...

if you align the data reversely then type row-reverse or column-reverse at flex_direction

1
2
3
4
5
6
7
8
9
10
11
12
13

...

.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
    display: flex;
    flex-direction: row-reverse;    /* NEW CODE */
}

...

flex-direction: row

flex-direction: column

flex-direction: row-reverse

flex-direction: column-reverse

4. justify-content

justify_content attribute in flex is for defining to align way at horizontal direction.

you can set with this attribute where it places like left or center, how much it has free space and how it sets ratio between each free space.

children elements will be applied when you define this attribute in parent element (= flex container)

1
2
3
4
5
6
7
8
9
10
11

justify-content: flex-start;    /* left (default) */

justify-content: flex-end;      /* right */

justify-content: center;        /* center */

justify-content: space-between; /* flex item will have same size of free space */

justify-content: space-around;  /* All of free space has same size including the front of the first element and the back of last one */

the above attributes (flex-start, flex-end, center, space-between, space-around) usually used in real.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

...

.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;        /* NEW CODE */
}

...

justify-content: flex-start

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

4. align-items

unlike justify-content attribute, align_items attribute can defines vertical aligning.

1
2
3
4
5
6

align-items: stretch;           /* The height of flex item is same with flex container's height(default) */
align-items: flex-start;        /* assigning based on top */
align-items: center;            /* assigning based on center */
align-items: flex-end;          /* assigning based on bottom */

1
2
3
4
5
6
7
8
9
10
11
12
13
14

...

.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

...

align-items: stretch

align-items: flex-start

align-items: center

align-items: flex-end

You should remember the stretch attribute set same the height with flex-container. but if you define the height at children element then the stretch attributle is ignored. 

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

.parent {
    width: 300px;
    height: 300px;
    background-color: #cccccc;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.child1 {
    width: 60px;
    // height: 60px;
    background-color: #222222;
}

.child2 {
    width: 60px;
    // height: 60px;
    background-color: #555555;
}

.child3 {
    width: 60px;
    // height: 60px;
    background-color: #888888;
}

in my experence, flexbox in css is not usually used in real service. because old browsers don’t support this attribute. so you should also know about how can solve same problem without flexbox.

Share