CSS

CSS layout

CSS provides us with various ways to solve layout problems, on a horizontal axis, vertical axis, or even both.
Choosing the right layout method for a context can be hard, and often you may need more than one layout method to solve your problem.

Display property

The display property specify the display behaviour of an element.

element {
display: block | inline | inline-block | flex | grid
}
Example 2.5.1

display:block

The element is displayed as a block element, meaning that it takes up the full width of its parent.
You can as an example use it when working with images inside elements.

element {
border: 1px solid green;
display:block
}
Example 2.5.2

display:block

display:block

Visual example of 2.5.2

display:inline

The element is displayed inline with other elements.
You can as an example use it, when you make a menu.

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline;
margin: 0;
padding: 10px;
}
Example 2.5.3
  • Link 1
  • Link 2
  • Link 3
Visual example of 2.5.3

display:inline-block

Inline-block allows to set a width and height on the element, which inline does not.
Inline-block respect the top and bottom margins/paddings, which inline does not.

ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
display: inline;
margin: 0;
padding: 10px;
}
Example 2.5.4
  • Link 1
  • Link 2
  • Link 3
Visual example of 2.5.4

The different between block, inline and inline-block

See the Pen display property by Dominoeffekten (@dominoeffekten) on CodePen.

Visual example of 2.5.5

Position property

You can use the position property to manipulate elements. It specifies the type of positioning method used for an element. It manipulates the location of an element.

position: static|absolute|fixed|relative|sticky|initial|inherit;
Example 2.5.6

position:static

HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties.

.static { 
position: static;
background-color: red;
height:50px;
width:50px;
}
Example 2.5.7
Visual example of 2.5.7

position:absolute

The element is taken out of the normal flow and placed relatively to its nearest ancestor that has the position property specified - if it has any (if not it will be placed according to the body element). It may be moved from that position using the top, right, bottom and left properties

.parent { 
position: relative;
}

.child {
height: 50px;
width: 50px;
position: absolute;
right: 10px;
bottom: 10px;
background-color: red;
}
Example 2.5.8
Visual example of 2.5.8

position:fixed

An element with position: fixed; s positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled

.fixed{
position:fixed;
}
Example of 2.5.9

It is often used when making a menu or with the use of images

You can see an example here

position:relative

An element with position: relative; is positioned relative to its normal position.
It can be moved with the top, right, bottom and left properties.

.relative { 
position: relative;
background-color: red;
height:50px;
width:50px;
top:10px;
left:10px
}
Example 2.5.10
Visual example of 2.5.10

Flexbox

Besides using position and float and you change the design of a site with flexbox.
Flexbox is a layout module that makes it easy to create a flexible responsive layout - with or without the use of float or position.
As with everything else when it comes to coding, there are many ways to achieving a goal, and one way is not neccessarily better than the other. Sometimes its just about personal preferences.

Flex container

The first thing we need is a flex container.

HTML

<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

CSS

.flex-container {
display: flex;
background-color: DodgerBlue;
}
Example 2.5.11
1
2
3
Visual example of 2.5.11

The blue area is the flex container with three flex items.

Flex properties

When working with Flexbox, you work with two axis - the main and the cross axis. The main axis is declared using the flex-direction property.

flex-direction: column | column-reverse | row | row-reverse;
Example 2.5.12

flex-direction: column

The column value stacks the flex items vertically (from top to bottom):

.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: column;
}
Example 2.5.13
1
2
3
Visual example of 2.5.13

flex-direction: column-reverse

The column-reverse value stacks the flex items vertically (but from bottom to top):

.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: column-reverse;
}
Example 2.5.14
1
2
3
Visual example of 2.5.14

flex-direction: row

The row value stacks the flex items horizontally (from left to right):

.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: row;
}
Example 2.5.15
1
2
3
Visual example of 2.5.15

flex-direction: row-reverse

The row-reverse value stacks the flex items horizontally (but from right to left):

.flex-container {
display: flex;
background-color: DodgerBlue;
flex-direction: row-reverse;
}
Example 2.5.16
1
2
3
Visual example of 2.5.16

The justify-content property

The justify-content property is used to adjust the elements along the main axis.

justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;
Example 2.5.17

justify-content: flex-start

The flex-start value aligns the flex items at the beginning of the container (this is default).

.flex-container {
display: flex;
background-color: DodgerBlue;
justify-content: flex-start;
}
Example 2.5.18
1
2
3
Visual example of 2.5.18

justify-content: flex-end

The flex-end value aligns the flex items at the end of the container.

.flex-container {
display: flex;
background-color: DodgerBlue;
justify-content: flex-end;
}
Example 2.5.19
1
2
3
Visual example of 2.5.19

justify-content: center

The center value aligns the flex items at the center of the container.

.flex-container {
display: flex;
background-color: DodgerBlue;
justify-content: center;
}
Example 2.5.20
1
2
3
Visual example of 2.5.20

justify-content: space-around

The space-around value displays the flex items with space before, between, and after the lines.

.flex-container {
display: flex;
background-color: DodgerBlue;
justify-content: space-around
}
Example 2.5.21
1
2
3
Visual example of 2.5.21

justify-content: space-between

The space-between value displays the flex items with space between the lines.

.flex-container {
display: flex;
background-color: DodgerBlue;
justify-content: space-between
}
Example 2.5.22
1
2
3
Visual example of 2.5.22

justify-content: space-evenly

The space-evenly value displays the flex items with space between and around the lines.

.flex-container {
display: flex;
background-color: DodgerBlue;
justify-content: space-evenly
}
Example 2.5.23
1
2
3
Visual example of 2.5.23

The align-items property

The align-items property is used to align the flex items

align-items: flex-start | flex-end | center | baseline | stretch;
Example 2.5.24

align-items: flex-start

The flex-start value aligns the flex items at the top of the container

.flex-container {
display: flex;
background-color: DodgerBlue;
align-items: flex-start;
height:200px;
}
Example 2.5.25
1
2
3
Visual example of 2.5.25

align-items: flex-end

The flex-end value aligns the flex items at the bottom of the container

.flex-container {
display: flex;
background-color: DodgerBlue;
align-items: flex-end;
height:200px;
}
Example 2.5.26
1
2
3
Visual example of 2.5.26

align-items: center

The center value aligns the flex items in the middel of the container

.flex-container {
display: flex;
background-color: DodgerBlue;
align-items: center;
height:200px;
}
Example 2.5.27
1
2
3
Visual example of 2.5.27

CSS grid

Besides flexbox is there also CSS grids.
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

Grid elements

A grid layout consists of a parent element, with one or more child elements.

HTML

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>

CSS

.grid-container {
display: grid;
background-color: DodgerBlue;
}

.grid-item{
background-color:red;
padding: 20px;
font-size: 30px;
text-align:center;
}
Example 2.5.28
1
2
3
Visual example of 2.5.28

What can we make with CSS?