CSS areas of exploration
Published: 2021-12-19 12:33:17

**Media Query:**
The Media query in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.
Media queries can be used to check many things:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
width and height of the viewport
width and height of the device
Orientation
Resolution
A media query consists of a media type that can contain one or more expressions which can be either true or false. The result of the query is true if the specified media matches the type of device the document is displayed on. If the media query is true then a style sheet is applied.
Syntax:

@media not | only mediatype and (expression) {
    // Code content
}

**FlexBox:**

CSS flexbox is a one-dimensional layout pattern that makes it easy to design flexible and effective layouts. The use of flexbox ensures that elements are properly placed and are predictable. Flex items are positioned inside a flex container along a flex line. By default, there is only one flex line per flex container.
CSS Flexbox Properties

Property
Description
display
It is used to set the type of box used for an HTML element.
flex-direction
It is used to fix the direction of the flex items inside the flex container.
align-items
It is used to vertically align the flex items, across the cross-axis.
flex-wrap
It specifies whether the flex items are forced in a single line or can wrap onto multiple lines.
align-content
It is used to align the flex container within it when there is extra space in the cross axis.
align-self
It is used on flex items. It overrides the container's align-items property.



**Framework:**

A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and focused around interactive UI patterns. This detail differentiates CSS frameworks from other JavaScript frameworks.
List of some CSS frameworks
Bootstrap

-Tailwind
-Material UI
-Blueprint
-Foundation



**CSS position:**

The position property tells the browser how an element should be positioned on the page. By default the value of position is static, but we can modify it to be any of the following values: relative, absolute, fixed, sticky.
Static
This is the default value of the position property. If the position of an element is static, the element will render in order, based on the position of it in the original document flow.
 
Relative
If we set the position of an element to relative, it will appear in the document as it would by default using static. The trick is that by setting position relative, we gain access to the following CSS properties: top, left, right, bottom. With these we can add an offset to the specific direction. So for example if we set left: 20px. The element will be placed 20 pixel to the right. If we would have provided -20px it would push the content to the left with 20px.
Fixed
With fixed positioning we also have access to top, left, right, bottom properties. In this case the element is positioned relative to the browser window's viewport.
Absolute
Absolute positioning is the one which can trick developers. It is working like the fixed positioning, but it is not positioned relatively to the viewport, but instead it is positioned based on the closest positioned element (which has position other than static). If there are no positioned parents it will be positioned relative to the viewport (Same result as it would be with fixed).
Sticky
Using sticky will position our element based on the user's scroll position. It toggles between position relative and fixed. We can provide the offsets using top, left, right, bottom. Until the specified offsets are met the element acts like a relatively positioned element, but when the scroll position is greater than the offset it "switches" to position fixed and be positioned relatively to the viewport. It stays fixed until the user scrolls back to the opposite direction and the distance will be less than the offset, then it goes back to act like a relative positioned element again.