FLEXBOX in css

Flex layout is used to give the container the ability to alter its item's width/height (and order) to best fill the available space. A flex container expands items to fill available free space or shrinks them to prevent overflow, the flexbox layout is direction-agnostic as opposed to the regular layouts (block which is vertically based and inline which is horizontally based)

Properties of parent(flex container):

Display: This defines a flex container. It enables a flex context for all its direct children.
```
.container {
  display: flex; 
}
```
Flex-direction: This establishes the main axis, thus defining the direction flex items are placed in the flex container.
```
.container {
  flex-direction: row | row-reverse | column | column-reverse;
}
```
flex-wrap: It wraps the content to make it more responsive while using the page on a different device.
```
.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}
```
Flex-Flow: This is a shorthand for the flex-direction and flex-wrap properties, which together define the flex container’s main and cross axes. The default value is row nowrap.
```
.container {
  flex-flow: column wrap;
}
```

justify-content: This defines the alignment along the main axis. It helps distribute extra free space left over. It works horizontally in the container.

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

align-items: This defines the default behavior for how flex items are laid out vertically.

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

align-content: This aligns a flex container’s lines within when there is extra space in the cross-axis.It only works on multi-line flexible containers, where flex-wrap is set to either (wrap or wrap reverse).
```
.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
```

gap : controls the gap between the flex items but not on the outer edges.

.container {
  display: flex;
  ...
  gap: 10px;
  gap: 10px 20px; /* row-gap column gap */
  row-gap: 10px;
  column-gap: 20px;
}

Properties of child class

order : the order property controls the order in which they appear in a flex container. The default order is the source order.
```
.item {
  order: 5; /* default is 0 */
}
```
flex-grow: This defines the ability to grow the element. It tells what amount of the available space inside the flex container the item should take up.
```
.item {
  flex-grow: 4; /* default 0 */
}
```
flex-shrink: This defines the ability of a flex item to shrink when needed.
```
.item {
  flex-shrink: 3; /* default 1 */
}
```

align-self: This allows the default alignment to be overridden by individual flex items.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

FLEXBOX in css

Table of contents

No headings in the article.