This content originally appeared on DEV Community and was authored by Dharshini E
Hi everyone!
What i learned today:
1.what is display:flex: ?
In css, display:flex: is a values of the display property that enables the flexible layout model for arranging the elements in a container.
when you can apply the display:flex: to the container element,it can become the flex container and its direct children become the flex items.
Syntax:
.container{
display:flex;
}
Flex Property:
-
display:flex;– container into the flex box. -
flex:direction;-define how flex items are placed in the flex container. - -flex default direction is row .
- -row
- -column
- -row-reverse
- -column-reverse
-
justify-content-Aligns items horizontally on main axis. -
align-items-Aligns items vertically on cross axis. -
gap– sets spacing between flex items. Example:
.container{
display:flex;
flex-direction:row;
justify-content:space-between;
align-items: center;
}
Interesting Website to practice flex:
website :https://flexboxfroggy.com
What is marign ?
Add space outside the element between the element and other elements
Example:
div{
margin:20px;
}
What is padding ?
Add space inside the element between the content and the **border.
div{
padding:20px;
}
Inspect
Inspect is a developer tool in your web browser that lets you view and interact with the HTML and CSS of a webpage in real-time.
Where do you find it?
Right click on the webpage and click inspect.
Shortcuts:ctrl + shift + i
Global Selector
The Global Selector(*)selects every elements on the page .
it applies the specified styles to all HTML element, unless overridden by more specific selectors.
Example
*{
margin:0;
padding:0;
}
Final Thoughts
Understanding basic concepts like margin,padding,flex directions ,inspect tools and global selector is essential for building clean and responsive websites .
Happy Codding!
This content originally appeared on DEV Community and was authored by Dharshini E