CSS : Stack order / flex

Stack order

In CSS, the "stack order" refers to the order in which elements are displayed or stacked on top of each other when they overlap in the layout. The stack order is determined by the z-index property, which controls the stacking context of elements.

When elements overlap, the element with a higher z-index value will appear on top of elements with lower z-index values. If elements have the same z-index, the order of appearance in the HTML document will determine their stack order.

The z-index property accepts integer values and can be either positive or negative. Higher positive values result in elements appearing on top of elements with lower values. Negative values position elements below elements with positive values.

Here's an example to illustrate the usage of z-index:

div {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

#element1 {
  background-color: red;
  z-index: 1;
}

#element2 {
  background-color: blue;
  z-index: 2;
}

#element3 {
  background-color: green;
  z-index: -1;
}

In this example, three div elements are positioned absolutely. element1 has a z-index of 1, element2 has a z-index of 2, and element3 has a z-index of -1. Therefore, element2 will appear on top of both element1 and element3.

 

If two elements have the same z-index, the order of appearance in the HTML document will determine their stack order. Elements that appear later in the HTML document will be rendered on top of elements that appear earlier.

 

It's important to note that the z-index property only affects elements with a position value of relative, absolute, or fixed. Elements with a static position are not affected by z-index.

 

 

flex

Flex Container

-> Define a flex container like a flex block element

-> Define a flex container like inline-flex inline elements

flex-direction : set the main axis

• row (left ⇒ right)
• row-reverse (right ⇒ left)
• column (top ⇒ bottom)
• column-reverse (bottom ⇒ top)

flex-wrap : bundle of flex items (line wrap)

• nowrap
• wrap

justify-content

Sorting method of the main axis

• flex-start : Sort Flex Items to the Starting point
• flex-end : Sort Flex Items to Endpoint
• center : Sorting Flex Items in the middle
• space-between : Each Flex Item evenly sorted
• space-around : Each flex item external margin aligns evenly

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

align-content

How to align multiple lines in cross axis

• stretch : Align flex items to the starting point
• flex-start : Aligns flex items to the starting point
• flex-end : Aligns flex items to the end point
• center : Center the flex items
• space-between : aligns each flex item evenly
• space-around : Align the outer margins of each flex item evenly

https://developer.mozilla.org/en-US/docs/Web/CSS/align-content

 

 

align-items

how to align single line of cross axis

• stretch : Align flex items to the starting point
• flex-start : Aligns flex items to the starting point
• flex-end : Aligns flex items to the end point
• center : Center the flex items

flex-grow

percentage of the flex item's growing width

 

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow

flex-grow - CSS: Cascading Style Sheets | MDN

 

flex-basis

The flex-basis property is part of the flexbox layout model in CSS and is used to specify the initial size of a flex item along the main axis before any available space is distributed. It determines the default size of a flex item before any flexibility properties like flex-grow and flex-shrink come into play.

Here's an example to illustrate the usage of flex-basis:

.container {
  display: flex;
}

.item {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 0;
}

In this example, the .container is a flex container, and .item is a flex item. The flex-basis property is set to 200px, which defines the initial width of the item. The flex-grow property is set to 1, indicating that the item can grow and take up any available space. The flex-shrink property is set to 0, meaning the item won't shrink when there is insufficient space.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

 

order

In CSS, the order property is used in flexbox and grid layouts to specify the order in which flex or grid items are displayed. It allows you to change the visual order of elements without modifying the underlying HTML structure.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/order

 

flex-shrink

The flex-shrink property is part of the flexbox layout model in CSS and is used to control how flex items shrink when there is insufficient space along the main axis of a flex container. It specifies the ability of flex items to decrease their size to fit the available space.

The flex-shrink property accepts a unitless number as its value. The higher the number, the more the flex item will shrink compared to other flex items within the same flex container.

Here's an example to illustrate the usage of flex-shrink:

.container {
  display: flex;
}

.item {
  flex-shrink: 1;
}

In this example, the .container is a flex container, and .item is a flex item. By setting flex-shrink: 1; on the .item class, it will shrink proportionally when there is not enough space to accommodate all the flex items within the container.

If multiple flex items have a flex-shrink value of 1, they will shrink by an equal proportion. However, if one item has a flex-shrink value of 2 and another has a value of 1, the former will shrink twice as much as the latter.

By default, the flex-shrink property has a value of 1 for flex items. If you don't want an item to shrink at all, you can set its flex-shrink value to 0.

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink