FSD CSS Part 11

CSS Flex Wrap
Flex Wrap is a very useful property in case of overflow of content. By default, CSS Flexbox
tries to fit all the elements in a single row, it can result into overflow of content outside of
the flex-container.
Flex Wrap property automatically places the flex-items in the next row, when they don't
fit in a single row.
Flex-wrap: Wrap; - It activates the Wrap property. Now, all the overflown content will slip
into next row and out of the container.
Flex-wrap: Wrap-reverse; - It also wraps the content but all the flex-items will be
wrapped in a reverse order.
Flex-wrap: Nowrap; - It is the default value, flex-items won't get wrapped.
This video is a sole property of Talent Battle Pvt. Ltd. Strict Penal Action will be taken against unauthorized piracy of this video
Program Illustration:
CSS Flex Flow (Shorthand property)
CSS Flex Flow property is a shorthand property in which we can combine both Flex-
direction and Flex-Wrap properties. We can give the values for both the properties just
by separating them with a space.
Syntax
<Flex-direction> <Flex-wrap>;
Example- Flex-flow: column wrap;
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
background-color: Tomato;
}
.flex-items {
background-color: #f1f1f1;
width: 100px;
margin: 5px;
text-align: center;
height: 40px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Flex-flow</h2>
<div class="flex-container">
<div class="flex-items">1</div>
</div>
</body>
</html>
Justify Content of a Row in CSS Flexbox
Justify Content property is used when you want to align the flex-items to be displayed in a
particular manner along the row(main axis).
It horizontally aligns the item as specified. It justifies the extra horizontal space present in a
row.
For example, It can place items at the start, end or center and it can also manipulate the
space around the flex-items.
There are different values that you can set to justify content:
justify-content:flex-start; - It places the flex-items at the starting of the flex(along the main
axis), i.e., extreme left.
justify-content:flex-end; - It places the flex-items at the ending of the flex(along the main
axis), i.e., extreme right.
justify-content:center; - It simply place the items in the center of the row. This
property along with align-items:center; is very useful in
centering the content within a flex-container.
justify-content:space-between; - It is a very useful property when there is some extra
space left in a row. It equally distribute the extra space in-between the flex-
items. The first and last item gets placed at left and right ends respectively and
then the space gets distributed between them. Look at the example to clarify its
concept.
justify-content:space-around; - This property will distribute equal amount of space to both left and
right side of a flex-item.
Align Items in CSS Flexbox
Align Items positions the flex-items along the vertical space(cross axis).
If there is some vertical space left around the flex-items, then that space can be justified
by using align-items property.
It works same as justify-content but in cross axis.
align-items:flex-start; - It places the flex-items at the starting of the flex(cross axis,
vertically).
align-items:flex-end; - It places the flex-items at the ending of the flex, i.e., at the bottom
of the container.
align-items:center; - It aligns all the items in the center of the cross axis.
align-items:baseline; - This property aligns all the flex items on their baselines. The center
point of all the flex-items would be on a same straight line. It will get cleared in the
example.
align-items:stretch; - This will stretch all the flex-items' height to fill all the available vertical
space. Remember that for stretch to work, the height of the flex-items should be set to
auto.
Align-Content of a column in CSS Flexbox
Align-content is similar to justify-content but it works on the cross axis(vertical axis). It will
align the items on the vertical axis, if, there is some extra space left. It is a little bit different
than previous properties, there are some conditions that should be met, for it to work:
• There property flex-flow should be set to wrap or wrap-reverse.

• There should be multiple rows. It doesn't show any effect on a single row.
So, it is clear from the above conditions that this property will only work when the
flex-flow:wrap/wrap-reverse gets engaged, otherwise not.
There are different values that can be set to align-content:
align-content:flex-start; - It places the flex items at the starting of the cross axis(vertical).
align-content:flex-end; - It aligns the flex-items at the end of the cross axis, i.e., bottom.
align-content:center; - All the items gets aligned in the center.
align-content:space-around; - This property will distribute equal amount of space to both

top and bottom side of a flex-items.
align-content:space-between; - It equally distribute the extra vertical space in-between the

flex-items.
align-content:stretch; - This property will stretch the height of all the flex-items to fill-up
the extra space present inside the container. Remember to use height:auto; on flex-items
for this property to show effect.
Note:
If Align-content is used on a single row with wrap property active, then the
properties flex-start, flex-end, center and stretch will work but space-between
and space-around won't work.
It is same as using align-items, so for single rows, never use align-content, use
align-items.
Flex Items Properties
Order of Flex-Items
You can set order of display for the individual flex-items. By default, the items are ordered
according to their source code but in a flexbox this order can be changed.
For example, an item which is added in the last, inside a flexbox can be displayed in the
start by using order property.
The default order property for the flex items is 0. The order property accept integer
values. Any item with a lower order value than the other will be before the other items.
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: #f1f1f1;
}
.flex-items {
background-color: Tomato;
color: white;
width: 100px;
margin: 10px;
text-align: center;
height: 50px;
font-size: 25px;
}
</style>
</head>
<body>
<h1>Order Property</h1>
<div class="flex-container">
<div style="order: 4" class="flex-items">1</div>
</div>
</body>
</html>

FSD CSS Part 11

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FSD CSS Part 11

Uploaded by

Copyright:

Available Formats

CSS Flex Wrap

Flex-wrap: Nowrap; - It is the default value, flex-items won't get wrapped.

Example- Flex-flow: column wrap;

It works same as justify-content but in cross axis.

• There property flex-flow should be set to wrap or wrap-reverse.

align-content:center; - All the items gets aligned in the center.

align-content:space-around; - This property will distribute equal amount of space to both

align-content:space-between; - It equally distribute the extra vertical space in-between the

You might also like