Flex-Container
Flex Container is the parent of the container inside. In this case div class main is the flex container and div class box is child also called flex item.
Add Display Flex to Flex-Container
.main {
display : flex;
}
Flex Container properties
The
flex-direction property defines in which direction the container wants to stack the flex items..main {
display:flex;
flex-direction :
}
column
column-reverse
row
row-reverse
flex-wrap
The
flex-wrap property defines in weather to wrap flex-items or not..main {
display:flex;
flex-wrap :
}
wrap;
nowrap;
flex-flow
The
flex-flow property is a shorthand property for setting both the flex-direction and flex-wrap properties..main {
display:flex;
flex-flow :
}
row wrap;
row-reverse wrap;
column wrap, column-reverse wrap
Try it yourself
Note: Add height property to flex container to test flex item wrapping or not.
justify-content
The
justify-content property is used to align the flex items:.main {
display:flex;
justify-content:
}
center
flex-end
flex-start
space-around
space-between
space-evenly
align-items
The
align-items property is used to align the flex items..main {
height:300px;
display:flex;
align-items:
}
setting height of flex-container(.main) to 300px.
center
flex-start
flex-end
stretch
Note: Remove height property from flex-items if any!
align-content
.main {
height:500px;
display:flex;
flex-wrap:wrap;
align-content:
}
To demonstrate better, setting height of flex-container(.main) to 500px.
baseline
flex-start
flex-end
space-around
space-between
space-evenly
stretch
Note: Remove height property from flex-items if any!
Perfect Centering.
.main {
display:flex;
}
.box{
display:flex;
justify-content:center;
align-items:center;
}
Note: Justify-content and align-item property only works when flex-item display property is set to flex
Flex item properties
flex items are the child elements of the flex container
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
order
The
order property specifies the order of the flex items.The order value must be a number, default value is 0.
<div class=".main">
<div class="box" style="order: 4">1</div>
<div class="box" style="order: 3">2</div>
<div class="box" style="order: 1">3</div>
<div class="box" style="order: 2">4</div>
</div>
flex-grow
The
flex-grow property specifies how much a flex item will grow.<div class=".main">
<div class="box" style="flex-grow: 6">1</div>
<div class="box" style="flex-grow: 3">2</div>
<div class="box" style="flex-grow: 1">3</div>
<div class="box" style="flex-grow: 5">4</div>
</div>
flex-shrink
The
flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.The value must be a number, default value is 1.
<div class=".main">
<div class="box" style="flex-shrink: 0">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box" style="flex-shrink: 0">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
set flex-wrap property to nowrap in flex-container
flex-basis
The
flex-basis property specifies the width of any individual flex-item<div class=".main">
<div class="box" style="flex-basis: 260px">1</div>
<div class="box" style="">2</div>
<div class="box" style="flex-basis: 160px">3</div>
<div class="box" style="">4</div>
</div>
flex
The
flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.<div class=".main">
<div class="box" style="">1</div>
<div class="box" style="flex: 0 0 150px">2</div>
<div class="box" style="">3</div>
<div class="box" style="">4</div>
</div>
You can also use flex to set the width of flex item width
<div class=".main">
<div class="box" style="">1</div>
<div class="box" style="flex: 50%">2</div>
<div class="box" style="">3</div>
<div class="box" style="">4</div>
</div>
align-self
The
align-self property specifies the alignment for the selected item inside the flexible container.<div class=".main">
<div class="box" style="">1</div>
<div class="box" style="align-self: center";height:(optional) >2</div>
<div class="box" style="">3</div>
<div class="box" style="">4</div>
</div>
set height of flex-container to 300px
and remove height from flex-item if any!
align-self: flex-start
align-self: flex-end
0 Comments