Notes: Module 10: Layout using CSS Flexbox
1. CSS Flexbox: Display
Task 1: Make div element with class 'flex-container' display as 'flex'.
Task 2: Make div elements with class 'inline-flex-container' display as 'inline-flex'.
Note: use external stylesheet for styling, i.e. [Link]
Solution :
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="flex-container"></div> background-color: yellow;
min-width: 100px;
<div class="inline-flex- min-height: 100px;
container"></div> border: 5px solid black;
<div class="inline-flex-container"></div> margin: 10px;
}
.flex-container{
display:flex;
}
.inline-flex-container{
display: inline-flex;
}
2. CSS Flexbox: Justify-content
Task 1: Evenly space children inside div with class 'container' in using justify-content
property.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> margin: 5px;
<div>1</div> border: 2px solid black;
<div>2</div> }
<div>3</div>
</div> .container {
background-color: yellow;
display: flex;
height: 300px;
justify-content:space-evenly;
}
.container div {
height: 50px;
width: 100px;
background-color: red;
}
3. CSS Flexbox: Align-items
Task 1: Vertically center children inside div with class 'container' in using align-items
property.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> margin: 5px;
<div>some text here!</div> border: 2px solid black;
<div>another text here!</div> }
<div>Hey There! How are you
doing?</div> .container {
</div> background-color: yellow;
display: flex;
height: 300px;
align-items:center;
}
.container div{
background-color:red;
}
4. CSS Flexbox: Flex-grow
Task 1: When stretched, make div with class main grow three times as much the div
with class sidebar.
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> border: 2px solid black;
<div class="sidebar"> }
<h1>Left Sidebar</h1>
</div> .container {
<div class="main"> display: flex;
<h1>Main content }
here!</h1> .main{
</div> flex-grow:3;
</div> }
.sidebar{
flex-grow:1;
}
5. CSS Flexbox: Flex-shrink
Task 1: When shrunk, make div with class main shrink 1.5 times as much
the div with class sidebar.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> border: 2px solid black;
<div class="sidebar"> }
<h1>Left Sidebar</h1>
</div> .container {
<div class="main"> display: flex;
<h1>Main content }
here!</h1> .main{
</div> flex-shrink:1.5;
</div> }
6. CSS Flexbox: Flex-basis
Task 1: Set the flex-basis property on div elements with class sidebar and
main to 100px and 300px respectively.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> border: 2px solid black;
<div class="sidebar"> }
<h1>Left Sidebar</h1>
</div> .container {
<div class="main"> display: flex;
<h1>Main content }
here!</h1>
</div> .sidebar {
</div> flex-grow: 0;
flex-basis:100px;
}
.main {
flex-grow: 1;
flex-basis:300px;
}
7. CSS Flexbox: Flex
Task 1: Make div with class sidebar 100px wide (Hint: use flex-basis for initial width),
and it should not grow or shrink when parent is resized.
Task 2: Make div with class main 300px wide (Hint: use flex-basis for initial width),
and it should grow and shrink by a factor of 1 when parent is resized.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> border: 2px solid black;
<div class="sidebar"> }
<h1>Left Sidebar</h1>
</div> .container {
<div class="main"> display: flex;
<h1>Main content }
here!</h1> .sidebar{
</div> flex-basis:100px;
</div> flex-grow:0;
flex-shrink:0;
}
.main{
flex-basis:300px;
flex-shrink:1;
flex-grow:1;
}
8. CSS Flexbox: Flex-wrap
Task 1: Wrap the children inside div with class container in reverse
direction.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> margin: 5px;
<div>1</div> border: 2px solid black;
<div>2</div> }
<div>3</div>
<div>4</div> .container {
<div>5</div> background-color: yellow;
<div>6</div> display: flex;
<div>7</div> height: 300px;
<div>8</div> align-content: center;
<div>9</div> flex-flow:row-reverse wrap-
</div> reverse;
}
.container div {
height: 100px;
width: 100px;
background-color: red;
}
9. CSS Flexbox: Align-content
Task 1: Center children inside div with class 'container' in using align-content
property.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> margin: 5px;
<div>1</div> border: 2px solid black;
<div>2</div> }
<div>3</div>
<div>4</div> .container {
<div>5</div> background-color: yellow;
<div>6</div> display: flex;
<div>7</div> height: 300px;
<div>8</div> flex-wrap: wrap;
</div> align-content:center;
}
.container div {
height: 50px;
width: 100px;
background-color: red;
}
10. CSS Flexbox: Flex-direction
Task 1: Change div element with class container flex-direction property to 'column'.
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
<!-- Insert HTML Body Content /* Insert CSS Here! */
Here! -->
div {
<div class="container"> margin: 5px;
<div>1</div> border: 2px solid black;
<div>2</div> }
<div>3</div>
</div> .container {
background-color: yellow;
display: flex;
height: 300px;
flex-direction:column;
}
.container div {
height: 50px;
width: 100px;
background-color: red;
}
11. CSS Flexbox: Flex-flow
Task 1: Wrap children inside div with class container as a row using single statement.
Note: use external stylesheet for styling, i.e. [Link]
Outout:
HTML Code CSS Code
<!-- Insert HTML Body Content Here! --> /* Insert CSS Here! */
<div class="container"> div {
<div>1</div> margin: 5px;
<div>2</div> border: 2px solid black;
<div>3</div> }
<div>4</div>
<div>5</div> .container {
<div>6</div> background-color: yellow;
<div>7</div> display: flex;
<div>8</div> flex-wrap:wrap;
<div>9</div> }
</div>
.container div {
height: 100px;
width: 100px;
background-color: red;
}
12. Nested Flex Box
Task 1: Set display property of div element with id main to flex.
Task 2: Set flex-wrap property of div element with id main to wrap.
Task 3: Set flex-grow, flex-shrink and flex-basis properties of div element with id main to 1,
1 and auto respectively. (Hint: User flex property to set all in one statement.)
Output:
Note: use external stylesheet for styling, i.e. [Link]
HTML Code CSS Code
!-- Insert HTML Body Content Here! --> /* Insert CSS Here! */
<div class="container"> div {
<div class="sidebar"> border: 2px solid black;
<h1>Left Sidebar</h1> }
</div>
<div id="main"> .container {
<div>1</div> display: flex;
<div>2</div> }
<div>3</div>
<div>4</div> #main > div {
<div>5</div> width: 50px;
<div>6</div> min-height: 50px;
</div> margin: 5px;
</div> }
#main{
display:flex;
}
#main{
flex-wrap:wrap;
}
#main{
flex:1 1 auto;
}
13. Assignment - Flex Layout
Task 1: Set display property to flex for all elements with class .flex
Task 2: Set flex-direction property to row and flex-wrap property to wrap for all
elements with class .row
Task 3: Set flex-direction property to column and flex-wrap property to wrap for
all elements with class .col
Task 4: Set flex-grow and flex-shrink property to 1 and flex-basis property to
56% for all elements with class .structure-1
Task 5: Set flex-grow and flex-shrink property to 1 and flex-basis property to
40% for all elements with class .a
Task 6: Set flex-grow and flex-shrink property to 1 and flex-basis property to
60% for all elements with class .b
Task 7: Set flex-grow and flex-shrink property to 1 and flex-basis property to
10% for all elements with class .structure-1-2-1
Task 8: Set flex-grow and flex-shrink property to 1 and flex-basis property to
50% for all elements with class .c and .d
Task 9: Set flex-grow and flex-shrink property to 1 and flex-basis property to
60% for all elements with class .e
Task 10: Set flex-grow and flex-shrink property to 1 and flex-basis property to
44% for all elements with class .structure-2
Task 11: Set flex-grow and flex-shrink property to 1 and flex-basis property to
50% for all elements with class .f and .structure-2-2
Task 12: Set flex-grow and flex-shrink property to 1 and flex-basis property to
75% for all elements with class .g
Task 13: Set flex-grow and flex-shrink property to 1 and flex-basis property to
25% for all elements with class .h
Note: Your result should look like the image below:
HTML Code CSS Code
<div class="container"> .content {
<div class="flex row structure"> color: #fff;
<div class="flex row structure-1"> background-color: #cccccc;
<div class="flex element a"> padding: 20px;
<div class="content"> font-family: 'Montserrat';
A font-size: calc(1vw + 1em);
</div> }
</div>
<div class="flex element b"> .element {
<div class="content"> padding: 10px;
B }
</div>
</div> .flex {
<div class="flex col structure-1-2-1"> box-sizing: border-box;
<div class="flex element c"> }
<div class="content">
C .row {
</div>
</div> }
<div class="flex element d">
<div class="content"> .col {
D
</div> }
</div>
</div> .content {
<div class="flex element e"> flex: 1 100%;
<div class="content"> }
E
</div> .structure {
</div> min-height: 360px;
</div> }
<div class="flex row structure-2">
<div class="flex element f"> .structure-1 {
<div class="content">
F }
</div>
</div> .a {
<div class="flex col structure-2-2">
<div class="flex element g"> }
<div class="content">
G .b {
</div>
</div> }
<div class="flex element h">
<div class="content"> .structure-1-2-1 {
H
</div> }
</div>
</div> .c,
</div> .d {
</div>
</div> }
.e {
.structure-2 {
.f {
}
.structure-2-2 {
.g {
.h {
}
.flex{
display:flex;
}
.row{
flex-direction:row;
flex-wrap:wrap;
}
.col{
flex-direction:column;
flex-wrap:wrap;
}
.structure-1{
flex-grow:1;
flex-shrink:1;
flex-basis:56%;
}
.a{
flex-grow:1;
flex-shrink:1;
flex-basis:40%;
}
.b{
flex-grow:1;
flex-shrink:1;
flex-basis:60%
}
.structure-1-2-1{
flex-grow:1;
flex-shrink:1;
flex-basis:10%;
}
.c,.d{
flex-grow:1;
flex-shrink:1;
flex-basis:50%;
}
.e{
flex-grow:1;
flex-shrink:1;
flex-basis:60%;
}
.structure-2{
flex-grow:1;
flex-shrink:1;
flex-basis:44%;
}
.f,.structure-2-2{
flex-grow:1;
flex-shrink:1;
flex-basis:50%;
}
.g{
flex-grow:1;
flex-shrink:1;
flex-basis:75%
}
.h{
flex-grow:1;
flex-shrink:1;
flex-basis:25%
}