"Elevate your online presence with <a herf ="https://digitalswifton.blogspot.com/">digital swifton<a/> your trusted digital marketing agency. Our experts specialize in crafting tailored strategies to boost your brand's visibility, engage your audience, and drive results. Let us navigate the digital landscape for you, so you can focus on what you do best."

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
{
} ..
..