CSS
Topperworld.in
Flexbox
⚫ The flexbox or flexible box model in CSS is a one-dimensional layout model
that has flexible and efficient layouts with distributed spaces among items
to control their alignment structure ie., it is a layout model that provides
an easy and clean way to arrange items within a container.
⚫ Flexbox can be useful for creating small-scale layouts & is responsive and
mobile-friendly.
❖ Pre Flexbox:
A recap of some properties in CSS which might be related to learning
Flexbox.
• We have different positional properties such as ‘absolute’ and ‘relative’
depending on how we want to place our elements in our page.
• Floats, grids, clear fixes to help aid in the positioning.
• Fixed heights for columns (one of the main elements to create
flexboxes).
❖ What exactly is a flexbox?
o Flexbox is a CSS display type design to help us craft CSS layouts quite
easily.
o Control the position, size and spacing of elements relative to their
parents elements and each other.
o They are great for responsive designing.
o It has its own set of properties.
o It defines formatting context, which controls layout.
o It is a parent-child relationship.
❖ Basics of Flexbox:
Apply a display type of flexbox to the parent container, this would make all
the child elements in it to adjust into the flex type and these would be
called the “flex items”. This means they have become more flexible i.e. we
©Topperworld
CSS
can control how much they can shrink and how much they can grow and
also the spacing between these elements.
display: flex property:
o The flex container can change the width, height and order of the child
elements.
o Items can grow or shrink to fill the available space or to prevent
overflow.
o Available space is distributed among other items.
©Topperworld
CSS
❖ Features of flexbox:
1. A lot of flexibility is given.
2. Arrangement & alignment of items.
3. Proper spacing
4. Order & Sequencing of items.
5. Bootstrap 4 is built on top of the flex layout.
Before the flexbox model, we had 4 layout modes:
⚫ Block: It is used to make sections in web pages.
⚫ Inline: It is used for text.
⚫ Table: It is used for two-dimensional table data.
⚫ Positioned: It is used for the explicit position of an element.
2 main components of the Flexbox:
⚫ Flex Container: The parent “div” which contains various divisions is called
a flex container.
⚫ Flex Items: The items inside the container “div” are flex items.
❖ CSS flex Property
✓ The flex CSS shorthand property is the combination of flex-grow, flex-
shrink, and flex-basis properties. It is used to set the length of flexible
items.
✓ The flex property is much more responsive and mobile-friendly.
✓ It is easy to position child elements and the main container. The margin
doesn’t collapse with the content margins.
✓ The order of any element can be easily changed without editing the
HTML section.
Syntax:
flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;
©Topperworld
CSS
❖ Property Values:
✓ flex-grow Property: A number that specifies, how much items will
grow relative to the rest of the flexible items.
✓ flex-shrink Property: A number that specifies, how much items will
shrink relative to the rest of the flexible items.
✓ flex-basis Property: It sets the length of items. Legal values of flex-
basis are: auto, inherit, or a number followed by %, em, px, or any other
length unit.
✓ flex-wrap Property:The CSS flex-wrap property is used to specify
whether flex items are forced into a single line or wrapped onto multiple
lines. The flex-wrap property allows enabling the control direction in
which lines are stacked. It is used to designate a single line or multi-line
format to flex items inside the flex container.
Syntax:
flex-wrap: nowrap|wrap|wrap-reverse|initial;
Example:
<!DOCTYPE html>
<html>
<head>
<title>flex-wrap property</title>
<style>
#main {
width: 400px;
height: 300px;
border: 5px solid black;
display: flex;
flex-wrap: wrap;
}
©Topperworld
CSS
#main div {
width: 100px;
height: 50px;
}
h1 {
color:#009900;
font-size:42px;
margin-left:50px;
}
h3 {
margin-top:-20px;
margin-left:50px;
}
</style>
</head>
<body>
<h1>Topper World</h1>
<h3>The flex-wrap:wrap property</h3>
<div id="main">
<div style="background-color:#009900;">1</div>
<div style="background-color:#00cc99;">2</div>
<div style="background-color:#0066ff;">3</div>
<div style="background-color:#66ffff;">4</div>
©Topperworld
CSS
Output:
➢ One-value syntax:
o The value should contain one of following:
o number: If it is represented as flex: <number> 1 0; then the value of flex-
shrink, flex-basis will supposed to be 1 & 0 respectively.
o It can be specified by one of the keyword as auto, none or initial.
➢ Two-value syntax:
o It must contains the following values:
o The first value should be the number that will represent the flex-grow.
o The second value should contain one of the following:
o a width with the valid value will represents the flex-basis.
➢ Three-value syntax:
o The values should be in the same order:
o first number represents the flex-grow.
o second number represents the flex-shrink.
©Topperworld
CSS
o a width with the valid value will represents the flex-basis.
Example:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Tutorial</title>
<style>
.flex-container {
display: flex;
background-color: #32a852;
}
.flex-container div {
background-color: #c9d1cb;
margin: 10px;
padding: 10px;
}
</style>
©Topperworld
CSS
</head>
<body>
<h2>Topper World</h2>
<h4> Flexbox</h4>
<div class="flex-container">
<div>Item1</div>
<div>Item2</div>
<div>Item3</div>
</div>
</body>
</html>
Output:
❖ Flexbox Axes:
While working with Flexbox, we deal with 2 axes:
) Main Axis
) Cross Axis
©Topperworld
CSS
Main Axis:
o By default, the main axis runs from left to right.
o Main Start: The start of the main axis is called Main Start.
o Main Size: The length between Main Start and Main End is called Main
Size.
o Main End: The endpoint is called Main End.
o Main And Cross Axis
left to right:
flex-direction: row;
©Topperworld
CSS
right to left:
flex-direction: row-reverse;
top to bottom:
flex-direction: column;
bottom to top:
flex-direction: column-reverse;
Cross Axis:
The cross axis will be perpendicular to the main axis.
o By default, Cross Axis runs perpendicular to the Main Axis i.e. from top
to bottom.
o Cross Start: The start of the Cross axis is called Cross Start.
o Cross Size: The length between Cross Start and Cross End is called Cross
Size.
o Cross End: The endpoint is called Cross End.
❖ Properties of flexbox:
Parent properties
✓ display defines a flex container – flex formatting context.
✓ flex-direction defines the main axis inside the container.
✓ flex-wrap allows flex items to wrap onto more than one line.
✓ flex-flow shorthand for flex-direction + flex-wrap.
✓ justify-content allows items to align along main axis.
✓ align-content allows items to align along cross axis in a single line.
✓ align-items aligns multiple lines of items on the cross axis.
Children/Flex-items properties
✓ order allows the change of order of items without altering the source
order.
✓ flex-grow allows an item to fill up the available free space.
✓ flex-shrink allows an item to shrink if there is no enough free space
available.
✓ flex-basis defines the size of an item before space is distributed.
©Topperworld
CSS
✓ flex is the shorthand for flex-grow + flex-shrink + flex-basis.
✓ flex-self has the ability to align one single item within the flex container.
❖ Benefits of a flexbox:
• Navigation bars and menus
• Grid Layouts
• Bar charts
• Equal height columns
©Topperworld
