CSS3 FlexBox Container Properties Tutorial with Example
The most Important CSS3 flexbox (flex box) container concept to learn tutorial with example
The most Important CSS3 flexbox (flex box) container concept to learn tutorial with example
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: inline-flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
Some text
<strong>Strong Tag</strong>
<span>Span Tag</span>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-basis: auto;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-basis: 20%;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-basis: 50%;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-basis: 80%;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-basis: 100%;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-basis: content;
background: #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-flow: row nowrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: row wrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: row wrap-reverse;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: row-reverse nowrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: row-reverse wrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: row-reverse wrap-reverse;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: column nowrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: column wrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: column wrap-reverse;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: column-reverse nowrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: column-reverse wrap;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-flow: column-reverse wrap-reverse;
height: 280px;
}
.child {
width: 50%;
height: 30%;
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex: 0 1 auto;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex: 0 0 auto;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex: none;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex: 0 1 50%;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex: 1 0 50%;
background: #8ed082;
}
.parent {
display: flex;
}
.child {
flex: 1;
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {
display: flex;
flex-direction: row;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-direction: row-reverse;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-direction: column;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-direction: column-reverse;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
flex-wrap: nowrap;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap-reverse;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> <div class="child">13</div> <div class="child">14</div> <div class="child">15</div> <div class="child">16</div> <div class="child">17</div> <div class="child">18</div> </div>
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> <div class="child">7</div> <div class="child">8</div> <div class="child">9</div> <div class="child">10</div> <div class="child">11</div> <div class="child">12</div> <div class="child">13</div> </div>
.parent {
display: flex;
justify-content: flex-start;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
justify-content: flex-end;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
justify-content: center;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
justify-content: space-between;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
justify-content: space-around;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
justify-content: space-evenly;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-content: flex-end;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-content: center;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-content: space-around;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-content: stretch;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
<div class="child">12</div>
<div class="child">13</div>
</div>
.parent {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div class="child">11</div>
<div class="child">12</div>
<div class="child">13</div>
</div>
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: auto;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: flex-start;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: flex-end;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: center;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: baseline;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: stretch;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: initial;
background: #8ed082;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.secondChild {
align-self: inherit;
background: #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child secondChild">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
.parent {
display: flex;
flex-grow: 0;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-grow: 1;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-grow: 1;
}
.child:nth-child(1) {
flex-grow: 2;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.parent {
display: flex;
flex-grow: 1;
}
.child:nth-child(1) {
flex-grow: 3;
}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {display: flex;}
.child {
width: 80%;
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-shrink: 1;
background: #8ed082;
}
.parent {display: flex;}
.child {
width: 80%;
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(2) {
flex-shrink: 0;
background: #8ed082;
}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
.parent {display: flex;}
.child {
order: 0;
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(3) {
order: -1;
}
.parent {display: flex;}
.child {
order: 0;
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(3) {
order: 0;
}
.parent {display: flex;}
.child {
order: 0;
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(3) {
order: 1;
}
.parent {display: flex;}
.child {
padding: 20px;
border: 1px solid #8ed082;
}
.child:nth-child(1) {order: 1;}
.child:nth-child(2) {order: 3;}
.child:nth-child(3) {order: 2;}
.child:nth-child(4) {order: 4;}
.child:nth-child(5) {order: 5;}
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>