The document explains the CSS Flexbox layout module, detailing properties such as flex-direction, flex-wrap, justify-content, align-items, and align-content for arranging flex items in a container. It also covers flex item properties including order, flex-grow, flex-shrink, and flex-basis, providing examples for better understanding. Lastly, it mentions the importance of the hero section on a website.

1. Flexbox in CSS
{
}
...

2. Flexbox basically a layout module of CSS
Before the Flexbox Layout module, there were four layout modes:
• Table, for two-dimensional table data
• Positioned, for explicit position of an element
} ..
First of all we need a container where all the elements are direct
child of the container.
Property of Container.
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3. The flex-direction Property
The flex-direction property defines in which direction the
container wants to stack the flex items.
} ..
flex-direction: column - stacks the flex items vertically (from top to
bottom).
|| column-reverse;- value stacks the flex items vertically (but from
bottom to top)
|| row;- value stacks the flex items horizontally (from left to right)
row-reverse;- stacks the flex items horizontally (but from right to
left)

4. The flex-wrap Property
The flex-wrap property specifies whether the flex items should
wrap or not.
} ..
flex-wrap: wrap;- specifies that the flex items will wrap if necessary
|| nowrap;- specifies that the flex items will not wrap (this is default)
|| wrap-reverse;- specifies that the flexible items will wrap if
necessary, in reverse order.
row-reverse;- stacks the flex items horizontally (but from right to left)
**The flex-flow property is a shorthand property for setting both the
flex-direction and flex-wrap properties.
flex-flow: row wrap;

5. The justify-content Property
The justify-content property is used to align the flex items:
} ..
justify-content: center; aligns the flex items at the center of the
container
|| flex-start; aligns the flex items at the beginning of the container
(this is default)
|| flex-end; aligns the flex items at the end of the container.
|| space-around; displays the flex items with space before, between,
and after the lines.
|| space-between; displays the flex items with space between the lines

6. The align-items Property
The align-items property is used to align the flex items.
} ..
align-items: center; aligns the flex items in the middle of the
container
|| flex-start; aligns the flex items at the top of the container
|| flex-end; aligns the flex items at the bottom of the container
|| stretch; stretches the flex items to fill the container (this is
default)

7. CSS Flex Items
The align-content property is used to align the flex lines.
} ..
The flex item properties are:
• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

8. }
...
The order Property: The order property specifies the order of the
flex items.
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
The flex-grow Property: The flex-grow property specifies how much a
flex item will grow relative to the rest of the flex items.
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

9. Make a Image
Gallery
{
}
...

10. What is The Hero Section.
As the first thing people see when they visit your
website, a hero section is the area that immediately
shows up on the screen under your logo and menu.
• What you have to offer
• Why people should trust you
• The benefits of working with you
• What action they should take next

12. Any Questions?
{
} ..
..

13. Rashedul Islam Emon
email: emonrasedul@gmail.com
Phone: +8801837995395
{
} ..
..