FlexBox Notes

Posted on Edited on In , Views: Disqus:

Notes of FlexBox container in css and its related properties

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JustifyingContent</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- <p>abcsi</p> -->
    <div class="container">
        <div class="item">Samuel</div>
        <div class="item">Jessica</div>
        <div class="item">Katrina</div>
        <div class="item">Hangrove</div>
        <div class="item">Janson</div>
        <div class="item">Alisa</div>
        <div class="item">Leo</div>
        <div class="item">Albert</div>
    </div>
</body>
</html>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container{
    border: solid 2px #806868;
    padding-bottom: 60px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    /*align-items: flex-end;
    flex-wrap: nowrap; */
}
.item{
    border: 2px solid #457081;
    margin: 10px;
}
.neu{
    border-radius: 58px;
    background: #3686c4;
    box-shadow:  -35px -35px 70px #245881,
             35px 35px 70px #48b4ff;
}

justify-content property:

Justify means changing how elements are grouped and spaced on the main axis. To justify flex items, we use the justify-content property.

Aligns flex items along the main axis of the current line of the flex container.

Values:

  • Default: justify-content : flex-start;
  • justify-content : center;
  • justify-content : flex-end;
  • justify-content : space-around;
  • justify-content : space-between;

flex-direction property:

Specifies how flex items are placed in the flex container, by setting the direction of the flex container’s main axis.
Values:
+ Default: row
+ flex-direction : row-reverse;
+ flex-direction : columnn;
+ flex-direction : column-reverse;
### flex-wrap property:
Controls whether the flex container is single-line or multi-line, and the direction of the cross-axis, which determines the direction new lines are stacked in.
+ Default: flex-wrap : nowrap;
+ flex-wrap : wrap;
+ flex-wrap : wrap-reverse
+ items that don’t fit to go to the top of the container instead of the bottom
### shorthand flex-flow property:
1
2
flex-direction: row;
flex-wrap: wrap;

can be replaced by:
1
flex-flow: row wrap;

align-items property:

Aligns flex items along the cross axis of the current line of the flex container.
Values:

  • Default: align-items : stretch;
  • align-items : center;
  • align-items : flex-start;
    • items take the size of their content and are at the beginning of the cross axis.
  • align-items : flex-end;

align-content property:

Sets the distribution of space between and around content items along a flexbox’s cross-axis or a grid’s block axis.

  • default: align-content: stretch;
  • align-content: center; /* Pack items around the center */
  • align-content: start; /* Pack items from the start */
  • align-content: end; /* Pack items from the end */
  • align-content: flex-start; /* Pack flex items from the start */
  • align-content: flex-end; /* Pack flex items from the end */