Avatar

CSS3 wallpaper

CSS Flexbox

Van Truong

This post mainly wrap up the information about CSS Flex, more detail tutorial you can find here:
- [W3School](https://www.w3schools.com/css/css3_flexbox.asp)
- [CSS-trick](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

![Flexbox Cheat Sheet](https://res.cloudinary.com/practicaldev/image/fetch/s--wZRwgDoY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/simonpaix/images/blob/main/blog/Flexbox_CheatSheet_LearnPine.png%3Fraw%3Dtrue)

First thing to remember:

- main-axis: the flex direction (default: row)
- cross-axis: opposite of main-axis (default: column)

**Parent properties:**
- `display`: flex
- `flex-direction` : set the main axis
- `flex-wrap` allows the items to wrap as needed
- `justify-content`: defines alignment along the main axis
    - Possible values: `flex-start`, `flex-end`, `center`, `space-between`, `space-around`, `space-evenly`
- `align-items`: defines alignment along the cross axis
    - Possible values: `flex-start`, `flex-end`, `center`, `stretch`, `baseline`
- `align-content` aligns when having multiple lines, like `justify-content` does with individual items. When there is only one line, `align-content` has no effect. **Use with `flex-wrap: wrap`**

**Children properties:**
- `align-self` override default alignment (or the one specified by align-items) for a specific item
    - possible values: `flex-start`, `flex-end`, `center`, `flex-end`, `baseline`, `stretch`
- `order` changes the order of flex items (default: 0)
- `flex-growth` allows item to grow using remaining space (default: 0)
    - If all items have flex-grow: 1, the remaining space is distributed equally
- `flex-shrink`  defines the ability for a flex item to shrink (default: 1)
    - The higher value, the more it shrink compared to siblings
- `flex-basis` sets the default size of a flex item, it accepts:
    - specific values: pixels, rm, %, auto
    - content: automatic sizing, based on its content
    - global values: inherit, initial, unset
- `flex`: define the size of of children
    - `flex-growth` default: 0
    - `flex-shrink`: default: 1
    - `flex-basis`: default: auto
    - `flex: 1` -> all equal, or `width: 100%` or `flex-basis: 100%`

# Practices

**Flexbox design patterns:**

- Columns with same width for all:

```css
.parent {
  display: flex;

  .children {
    flex-basis: 100%;
    /* flex: 1 */
  }
}
```

- **Grid-ish**: use all available spaces, if not wrap and move on

```css
.parent {
  display: flex;
  flex-wrap: wrap;

  .children {
    flex: 1 1 30%;
  }
}
```

- **Content and sidebar**

```css
.parent {
  display: flex;
  flex-wrap: wrap;

  .children1 {
    flex: 1 1 70%;
    min-width: sth;
  }

  .children2 {
    flex: 1 1 30%;
    min-width: sth;
  }
}
```

- **Another example**

![CSS flex design example](//images.ctfassets.net/tk7dn5bsmtgs/2e4sdCM3NzSShM1JOa090C/af387d91ea75f1c00696eef6191d942c/Untitled.png)

    - The container is set using Flexbox
    - We want the value of dropdown take up all remaining space ⇒ `flex-grow: 1`
    - We want the vertical divider to take up full height ⇒ `align-self: stretch`


Summarize the most important attributes of CSS Flexbox and common practices

About CSS Flexbox

## CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style. We can divide CSS selectors into five categories:

- __Basic selectors__
  - Type selector: `input`, `div`, `h1`
  - Class selector: `.class`
  - ID selector: `#id`
  - Attribute selectors: `[attr]` `[attr=value]` `[attr~=value]` `[attr|=value]` `[attr^=value]` `[attr$=value]` `[attr*=value]`
- __Grouping selectors__
  - `Selector list ","` list all matching
  - `Descendant combinator " "`: selects nodes that are descendants of the first element (all B inside A)
  - `Child combinator ">"`: selects nodes that are direct children of the first element
  - `General Sibling combinator "~"`: second element follows the first (though not necessarily immediately), and both share the same parent
  - `Adjacent sibling combinator "+"`: The `+` combinator matches the second element only if it __immediately__ follows the first element.
- __Pseudo-class selectors__ (select elements based on a certain state)
  - State examples `:enabled`, `disabled`, `:checked`
  - Tree-structural:
    - `nth-child`     
    - `:nth-last-child`
    - `:first-child`
    - `:last-child`
    - `:only-child`
    - `:nth-of-type`
    - `:nth-last-of-type`
    - `:first-of-type`
    - `:last-of-type`
    - `:only-of-type`
  - User action: `:hover`, `:active`, `:focus`
- __Pseudo-elements selectors__ lets you style a specific part of the selected element(s)
  - Examples: `::after`, `::before`, `::first-letter`, `::first-line`, `::marker`   

Here is the detail of all available selectors: [Appendix A - Selector Examples](#appendix-selector-examples)

__*Reference*__

- [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
- Reference W3School [Link](https://www.w3schools.com/cssref/css_selectors.asp)
- Online tool [Link](https://www.w3schools.com/cssref/trysel.asp)

## CSS Box model

`The CSS box model` as a whole applies to block boxes and defines how the different parts of a `box — margin`, `border`, `padding`, and `content` — work together to create a box that you can see on a page. Inline boxes use just some of the behavior defined in the box model.

Important note:
- `display: block`: The `width` and `height` properties are respected
- `display: inline`: The `width` and `height` will not apply

### Parts of a box

- __Content box__: The area where your content is displayed; size it using properties like `inline-size` and `block-size` or `width` and `height`.
- __Padding box__: The padding sits around the content as white space;
- __Border box__: The border box wraps the content and any padding;
- __Margin box__: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements;

![CSS box model](//images.ctfassets.net/tk7dn5bsmtgs/3Q6M4cl0OyOEqNVlr0Kj7D/62857a2317620338b33693f9e32e0238/box-model.png)

### The standard CSS box model

By default, `box-size: content-box`

```css
.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
```

The actual space taken up by the box will be 410px wide (`350 + 25 + 25 + 5 + 5`) and 210px high (`150 + 25 + 25 + 5 + 5`). Note: we do not count margin when it comes to actual size of the box.

### The alternative CSS box model

The `content area width` is that `width` minus the width for the `padding` and `border` (see image below). No need to add up the border and padding to get the real size of the box.

> content width = width - padding - border

```css
.box {
  box-sizing: border-box;
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

/* Now, the actual space taken up by the box will be 350px in the inline direction and 150px in the block direction. */
```

To use the alternative box model for all of your elements (which is a common choice among developers), set the box-sizing property on the `<html>` element and set all other elements to inherit that value:

```css
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}
```

__*Reference*__

- [The box model - mdn](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)

## CSS Units

- `font-size`: `rem`
- `width`: `%` in a combination with `max-width`, `ch`
- `height`: question yourself do I really need to set height, if yes => use a min-height
- `padding/margin`: `rem` or `em`
- media querries: `em`
- `px` only for little things like shadows, borders, ...
- use `vw/vh` for bigger layouts like background
- `ch` is relative to the width of the number 0 of the current font
  - used to size the width of a paragraph
  - For example `max-width: 40ch;` = maximum 40 characters per line.

## Specificity

__Specificity__ is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. When there are multiple CSS rules apply to the same element, Specificity will help us determine which one should be selected.

Let’s take a look at how the numbers are actually calculated:

![Specificity](https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/01/specificity-calculationbase_rhrovi.png?w=570&ssl=1)

- If the element has inline styling, that automatically wins (1,0,0,0 points)
- For each ID value, apply 0,1,0,0 points
- For each class value (or pseudo-class or attribute selector), apply 0,0,1,0 points
- For each element reference, apply 0,0,0,1 point

__*Important Notes:*__

- When we'are having the same specificity value, the __last declared selector__ has precedence.
- Styles for a `directly targeted` element will always take precedence over `inherited styles`, regardless of the specificity of the inherited rule. Given the following CSS and HTML. The `h1` will be __purple__ because the `h1` selector targets the element specifically, while the green is inherited from the `#parent` declarations.

```css
#parent { color: green }
h1 { color: purple }
```

```html
<html>
  <body id="parent">
    <h1>Here is a title!</h1>
  </body>
</html>
```

- The universal selector `(*)` has no specificity value `(0,0,0,0)`
- `Pseudo-elements` (e.g. :first-line) get `0,0,0,1` unlike their `psuedo-class` brethren which get `0,0,1,0`
- The `pseudo-class :not()` adds no specificity by itself, only what’s inside it’s parentheses.
- The `!important` value appended a CSS property value is an __automatic win__. It overrides even inline styles from the markup. The only way an `!important` value can be overridden is with another `!important` rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.
- Using `!important` to override specificity is considered a __bad practice__ and should be avoided for this purpose. Instead of using `!important` to override foreign CSS (from external libraries, like Bootstrap or normalize.css), import the third-party scripts directly into cascade layers. If you must use `!important` in your CSS, comment your usage so future code maintainers know why the declaration was marked important and know not to override it.

__*Reference*__
- [CSS Specificity - MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)
- [Specifics on CSS Specificity - CSS Tricks](https://css-tricks.com/specifics-on-css-specificity/)

## How to center everything !

__*Horizontally*__
- `inline elements`: You can center inline elements horizontally, within a __block-level parent__ element, with just:   

```css
/* Applied to block-level parent, not the element itself */
.center {  text-align: center }
```
- `block-level element`: we can use `margin: 0 auto;`

__*Vertically*__
- `inline elements`: using table with vertical-align

```css
.center-table p {
  display: table-cell;
  vertical-align: middle;
}
```
> The `vertical-align` CSS property sets vertical alignment of an `inline`, `inline-block` or `table-cell` box.

- `block-level element`: we can vertically align a block by:
```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
```
> The CSS `left` property is based on the size of the __parent__ element.

> The `transform` property is based on the size of the __target__ element.

__*Both Horizontally & Vertically*__
```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
```css
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
```
```css
.center {
  display: grid;
  place-items: center;
}
```

__*Reference:*__
- [Centering in CSS: A Complete Guide - css tricks](https://css-tricks.com/centering-css-complete-guide/)

## Position

## Layout (flex, grid)

[CSS Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout)

## Appendix Selector Examples

| Selector | Example | Example description |
|---|---|---|
| `.class` | .intro | Selects all elements with class="intro" |
| `.class1.class2` | .name1.name2 | Selects all elements __with both__ name1 and name2 set within its class attribute |
| `.class1 .class2` | .name1 .name2 | Selects all elements with name2 that is a descendant of an element with name1 |
| `#id` | #firstname | Selects the element with id="firstname" |
| `*` | `*` | Selects all elements |
| `element` | p | Selects all `<p>` elements |
| `element.class` | p.intro | Selects all `<p>` elements with class="intro" |
| `element,element` | div, p | Selects all `<div>` elements and all `<p>` elements |
| `element element` | div p | Selects all `<p>` elements inside `<div>` elements |
| `element>element` | div > p | Selects all `<p>` elements where the parent is a `<div>` element |
| `element+element` | div + p | Selects the first `<p>` element that is __placed immediately__ after `<div>` elements |
| `element1~element2` | p ~ ul | Selects every `<ul>` element that is __preceded__ by a `<p>` element |
| `[attribute]` | `[target]` | Selects all elements with a target attribute |
| `[attribute=value]` | `[target=_blank]` | Selects all elements with target="_blank" |
| `[attribute~=value]` | `[title~=flower]` | Selects all elements with a title attribute containing the word "flower" |
| `[attribute^=value]` | `a[href^="https"]` | Selects every `<a>` element whose href attribute value begins with "https" |
| `[attribute$=value]` | `a[href$=".pdf"]` | Selects every `<a>` element whose href attribute value ends with ".pdf" |
| `:active` | a:active | Selects the active link |
| `::after` | p::after | Insert something after the content of each `<p>` element |
| `::before` | p::before | Insert something before the content of each `<p>` element |
| `:checked` | input:checked | Selects every checked `<input>` element |
| `:default` | input:default | Selects the default `<input>` element |
| `:disabled` | input:disabled | Selects every disabled `<input>` element |
| `:empty` | p:empty | Selects every `<p>` element that has no children (including text nodes) |
| `:enabled` | input:enabled | Selects every enabled `<input>` element |
| `:first-child` | p:first-child | Selects every `<p>` element that is the first child of its parent |
| `::first-letter` | p::first-letter | Selects the first letter of every `<p>` element |
| `::first-line` | p::first-line | Selects the first line of every `<p>` element |
| `:first-of-type` | p:first-of-type | Selects every `<p>` element that is the first `<p>` element of its parent |
| `:focus` | input:focus | Selects the input element which has focus |
| `:fullscreen` | :fullscreen | Selects the element that is in full-screen mode |
| `:hover` | a:hover | Selects links on mouse over |
| `:in-range` | input:in-range | Selects input elements with a value within a specified range |
| `:indeterminate` | input:indeterminate | Selects input elements that are in an indeterminate state |
| `:invalid` | input:invalid | Selects all input elements with an invalid value |
| `:lang(language)` | p:lang(it) | Selects every `<p>` element with a lang attribute equal to "it" (Italian) |
| `:last-child` | p:last-child | Selects every `<p>` element that is the last child of its parent |
| `:last-of-type` | p:last-of-type | Selects every `<p>` element that is the last `<p>` element of its parent |
| `:link` | a:link | Selects all unvisited links |
| `::marker` | ::marker | Selects the markers of list items |
| `:not(selector)` | :not(p) | Selects every element that is not a `<p>` element |
| `:nth-child(n)` | p:nth-child(2) | Selects every `<p>` element that is the second child of its parent |
| `:nth-last-child(n)` | p:nth-last-child(2) | Selects every `<p>` element that is the second child of its parent, counting from the last child |
| `:nth-last-of-type(n)` | p:nth-last-of-type(2) | Selects every `<p>` element that is the second `<p>` element of its parent, counting from the last child |
| `:nth-of-type(n)` | p:nth-of-type(2) | Selects every `<p>` element that is the second `<p>` element of its parent |
| `:only-of-type` | p:only-of-type | Selects every `<p>` element that is the only `<p>` element of its parent |
| `:only-child` | p:only-child | Selects every `<p>` element that is the only child of its parent |
| `:optional` | input:optional | Selects input elements with no "required" attribute |
| `:out-of-range` | input:out-of-range | Selects input elements with a value outside a specified range |
| `::placeholder` | input::placeholder | Selects input elements with the "placeholder" attribute specified |
| `:read-only` | input:read-only | Selects input elements with the "readonly" attribute specified |
| `:read-write` | input:read-write | Selects input elements with the "readonly" attribute NOT specified |
| `:required` | input:required | Selects input elements with the "required" attribute specified |
| `:root` | :root | Selects the document's root element |
| `::selection` | ::selection | Selects the portion of an element that is selected by a user |
| `:target` | .news:target | Selects the current active .news element (clicked on a URL containing that anchor name) |
| `:valid` | input:valid | Selects all input elements with a valid value |
| `:visited` | a:visited | Selects all visited links |


Must-know knowledge about CSS to be a Frontend engineer.

TAGGED POSTS css

About CSS Flexbox

CSS Fundamental Knowledge