Day 3 of Learning Web Development: My Third Day learning HTML & CSS

#webdev #html #css #java

Hey everyone! 👋

This is my second blog post, Today I have been learned some new Interesting Topics and this is my Day 3 of new adventure.

What is CSS flex?

1.Flex is short for the Flexible Layout module.

2.Flex is a layout method for arranging items in rows or columns.

3.Flex makes it easier to design a flexible responsive layout structure.

Flex Components

a Flex Container - the parent (container)

element.
Flex Items - the items inside the container .

Example

 <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

The flex-direction property

row
column
row-reverse
column-reverse

Few Example

Row it displays the flex items horizontally:

.flex-container {
  display: flex;
  flex-direction: row;
}

Output:

A B C

Column displays the flex items vertically:

.flex-container{
  display: flex;
  flex-direction: column;
}

Output:

A
B
C

What is CSS Margin?

The Margin are used to create space in Outside of the Elements.

CSS properties

margin-top
margin-right
margin-left
margin-auto
margin-length
margin-width

What is CSS Padding?

Padding is used to create space Inside of the border.
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).

CSS properties

padding-top
padding-right
padding-bottom
padding-left
length - specifies a padding in px, pt, cm, etc.

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Allign Items used for column.
Justify-content used for row. It Always flex direction.
Out of the box use as Margin.
Inside the box use as Padding.

Interesting Website to practice Flex:

Website: https://flexboxfroggy.com

It's a games. To understanding the concept of the Flex concepts.

🎯 This is the Day 3 of learning Web Development. I’m pushing myself to learn something new and share what I explored some core concepts and tools in frontend development.