Flex, Flexbox and media query

Flex

img source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

The flex property sets the flexible length on flexible items. So flex property shows how a flex item will grow to fit the space available in its flex container. The flex property in CSS is shorthand for flex-grow, flex-shrink, and 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 property specifies the direction of the flexible items.

img source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • (default): left to right in ; right to left in
  • : right to left in ; left to right in
  • : same as but top to bottom
  • : same as but bottom to top

Flexbox

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.

allows 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.

The default value is . This will cause everything to stay in one row from left to right.

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.

also allows items to pop to the next row but this time the items are displayed from right to left.

is a property to align items in the container along the main axis . This changes depending on how content is displayed.

img source: https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/

Media Query

Media Types

Media types describe the general category of a device. Except when using the or logical operators, the media type is optional and the type will be implied.

Suitable for all devices.

Intended for paged material and documents viewed on a screen in print preview mode.

Intended primarily for screens.

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).

The 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.

The 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 operator, you must also specify a media type.

source: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries