Internet Technology and Web Design (BIT122/BS)

Lecturer: Nkoloogi Blasius

Email: [email protected]
Tel No: 0757886712

LECTURE 6: CSS (PART 5)

CSS Layout

Introduction

In the previous lecture, we explored techniques for arranging CSS boxes within the viewport and
in relation to other elements, covering display settings and various positioning methods. We also
introduced Flexbox, a powerful modern layout tool for creating flexible, responsive designs. In
this lecture, we will delve further into Flexbox, exploring its core concepts and features in
greater detail to provide a comprehensive understanding of how to use it effectively for layout
design.

FLEX BOX

A Flex box (Flexible Box) is a layout model designed to help arrange items within a container
efficiently and responsively. It provides a way to distribute space along a single axis (either
horizontal or vertical) and adjust the size of items to fill available space or shrink to prevent
overflow. The horizontal axis is called the Main Axis while the vertical is called the Cross Axis.

Flexbox breaks the old style of using float or position making it easier to design flexible
responsive layout page structures.

What do you need to use flexbox styling?

A parent (flex container) and children(flex items).

Forexample:

In the following code, we have a flex-container (the parent div) and 3 div container elements (the
children div). https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox

CSS Flex Container

The flex container becomes flexible when by setting the display property to flex.

The example uses a child combinator selector to style the flex items.
https://www.w3schools.com/css/css_combinators.asp

A flex container can use the following properties:

● flex-direction
● flex-wrap
● flex-flow
● justify-content
● align-items
● align-content

1. The flex-direction Property

The flex-direction property defines in which direction the container wants to stack the flex items.
The direction may be horizontal or vertical (left to right or top to bottom).
Example:
In this example, the column value stacks the flex items vertically (top to bottom).
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_column
In the example above, the order of top to bottom is the default when you set flex-direction to
column. However it can be reversed by setting flex-direction to column-reverse as shown in the
following example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_column-reve
rse
Just like direction was set to column, it can also be set to row so that items a rendered from left
to right (default order) by flex-direction to row. Moreover, this order can also be changed so that
items now are rendered from right to left by setting flex-direction to row-reverse.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-direction_row-reverse

2. The flex-wrap Property

The flex-wrap property specifies whether the flex items should wrap or not. We wrap by setting
flex-wrap to wrap.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_wrap
2.1 Removing the wrap:
We set flex-wrap to nowrap to specify that the flex items will not wrap. This is ideally the default
setting.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_nowrap
2.2 Reversing the wrap order:
To specify the flexible items wraps in reverse order, we set flex-wrap to wrap-reverse.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-wrap_wrap-reverse

3. The flex-flow Property

This is the shorthand property for setting both the flex-direction and flex-wrap properties.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_flex-flow_row_wrap

4. The justify-content Property

This is used align the flex items. We can align to center, left or right.
4.1 center
Example: We set justify-content to center
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_center
Example: left We set justify-content to flex-start
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_flex-start
4.2 flex-end
Example: right. We set justify-content to flex-end
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_flex-end
4.3 space-around
To display flex items with space before, between and after the lines, we set justify-content to
space-around.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_space-aroun
d
4.4 space-between
To display flex items with space between the lines, we set justify-content to space-between.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_justify-content_space-betw
een

5. The align-items Property

This also aligns the flex items but vertically. We can align items to center, to top or bottom.
5.1 Align to center:
Setting align-items to center aligns the flex items in the middle of the container.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_center
5.2 Align to top:
Setting align-items to flex-start aligns the flex items at the of the top container.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_flex-start
5.3 Align to bottom:
Setting align-items to flex-end aligns the flex items at the of the bottom of the container.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_flex-end

5.4 Stretching flex items

Setting align-items to stretch allows flex items fill the container. This is the default.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_stretch
5.5 baseline alignment
To align the flex items such as their baseline aligns, we set align-items to baseline
The example below shows how items get aligned by the text baseline using different font-size.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-items_baseline
6. The align-content property
The align-content property is used to align the flex lines. We shall use align-content property in
combination with the flex-wrap property, while setting a certain height for the flex container.
6.1 space between
This value displays the flex lines with equal space between them. We set align-content property
to space-between.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_space-betwee
n
6.2 space around
This value displays the flex lines with space before, between, and after them. We set
align-content property to space-around.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_space-around
6.3 stretch
This value stretches the flex lines to take up the remaining space. Its the default. We set
align-content property to stretch.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_stretch
6.3 center
This value displays the flex lines in the middle of the container. We set align-content property to
center.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_center
6.4 flex-start
This value displays the flex lines at the start of the container. We set align-content property to
flex-start.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_flex-start
6.5 flex-end
This value displays the flex lines at the end of the container. We set align-content property to
flex-end.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_align-content_flex-end
6.6 Perfect Centering
In a scenario where we need to have a perfect centering, we set both justify-content and
align-items properties to center. By doing that, the flex item will be perfectly centered.
Example:
https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_perfect_center

SUMMARY OF THE CSS FLEXBOX CONTAINER PROPERTIES

Property Description

align-content Modifies the behavior of the flex-wrap

property. It is similar to align-items, but
instead of aligning flex items, it aligns flex
lines

align-items Vertically aligns the flex items when the items

do not use all available space on the
cross-axis

display Specifies the type of box used for an HTML

element
 flex-direction Specifies the direction of the flexible items
inside a flex container

flex-flow A shorthand property for flex-direction and

flex-wrap

flex-wrap Specifies whether the flex items should wrap

or not, if there is not enough room for them
on one flex line

justify-content Horizontally aligns the flex items when the

items do not use all available space on the
main-axis

Conclusion

To this extent, we have explored how to manipulate the flex container (parent). In the next
lecture, we shall explore the flex items (the child elements) and the different properties used.
Check Next Topic: https://www.w3schools.com/css/css3_flexbox_items.asp