What is Flex, Flexbox and media query? [Web Developer]
Flex
flex: flex-grow;
flex: flex-shrink;
flex: flex-basis;
flex-grow specifies the flex grow factor or positive flexibility for the flex item.
flex-shrink specifies the flex shrink factor or negative flexibility for the flex item.
flex-basis specifies the initial size of the flex item.
The flex-direction property specifies the direction of the flexible items.
CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. CSS flexbox is great to use for the general layout of your website or app.
align-itemsallows us to align items along the cross axis. This allows content to be positioned in many different ways using justify content and align items together.
display: flexbox;
align-items: flex-start
align-items: flex-end;
align-items: center;
The default value isflex-wrap:nowrap This will cause everything to stay in one row from left to right.
flex-wrap: wrap will allow items to pop to the next row if there is not enough room on the first row. The items will be displayed from left to right.
flex-wrap: wrap-reverse also allows items to pop to the next row but this time the items are displayed from right to left.
justify-content is a property to align items in the container along the main axis . This changes depending on how content is displayed.
Media Query
Media Types
Media types describe the general category of a device. Except when using the not or only logical operators, the media type is optional and the alltype will be implied.
allSuitable for all devices.
print Intended for paged material and documents viewed on a screen in print preview mode.
screen Intended primarily for screens.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;}
}
If the browser window is 600px or smaller, the background color will be lightblue.
Media queries are useful when you want to modify your site or app depending on a device’s general type (such as print vs. screen) or specific characteristics and parameters (such as screen resolution or browser viewport width).
and
The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. It is also used for joining media features with media types.
not
The not operator is used to negate a media query, returning true if the query would otherwise return false. If present in a comma-separated list of queries, it will only negate the specific query to which it is applied. If you use the not operator, you must also specify a media type.
source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Post a Comment