# Grid System

\ <br>

### HTML / CSS Layout

* Layout core

  : Stacks from the top left (box model)

  * How?
    * block
    * inline
* Methods to change the layout flow
  * float
  * position
    * flex: flexible box

\ <br>

## flex

> Before `flex`, `float` and `position` had to be specified for layout

<br>

![img](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)

<br>

### Key Concepts of flex

* `container`
* `item`

```html
<style>
    .container {
        display: flex;
    }
</style>


<div class="container">
    <div class="item"></div>
    <div class="item"></div>
</div>
```

<br>

* **Axes**
  * `main axis`

    : Main axis

    * Horizontal axis when `flex-direction: row;`
    * Vertical axis when `flex-direction: column;`
    * Vertical axis *going from bottom to top* when `flex-direction: column-reverse;`
    * Horizontal axis *going from right to left* when `flex-direction: row-reverse;`
  * `cross axis`

    : Cross axis

\ <br>

### When Defining flex

1. All items are arranged based on the `main axis`
   * The default is `row`
   * If set to `row-reverse`, arrangement starts from the right end
2. All `items` are arranged based on row by default
   * `flex-direction` : Default set to `row` value
3. All `items` fill the `cross axis`
   * They fill the entire height
     * Because `align-items: stretch;` is the default value
4. All `items` take up width equal to their own width or content area
   * In some cases, it can be smaller than their specified width
     * Because `flex-wrap: nowrap` is the default value
     * ex) When the total width of all items is less than the container width
5. Each area occupies space equal to its content size / width
   * It can be even smaller!
6. All areas fill the cross axis

<br>

\ <br>

### flex Properties

<br>

#### 1. flex-wrap

* Default value `nowrap`
  * Forces everything into one line
* `wrap`
  * Each item takes its own width and wraps to the next line when there's no room
  * Prevents overflow!
* `wrap-reverse`
  * Items wrap round to additional lines in reverse

<br>

#### 2. flex-grow

> `flex-grow` divides and distributes the remaining width by ratio

* Default value `0`

<br>

#### 3. flex-flow

> Shorthand property for `flex-direction` and `flex-wrap`

* Default value `row wrap`
* `row-reverse nowrap`
* `column wrap-reverse`
* `column wrap`

<br>

#### 4. justify-content

> Aligns based on the main axis

* Default value: `flex-start`
* `flex-start`
* `flex-end`
* `center`
* `space-around`
* `space-between`
* `space-evenly`

<br>

#### 5. align-items

> Aligns based on the cross axis

* `stretch`

  : Default value
* `flex-start`

  : Top alignment
* `flex-end`

  : Bottom alignment
* `baseline`

  : items are aligned such as their baselines
* `center`

  : Center alignment

<br>

#### 6. align-content

> Sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis

<br>

*`align-content` has no effect when there is only one line of flex items!*

<br>

* Default value: `stretch`
* `flex-start`
* `flex-end`
* `center`
* `space-between`
* `space-around`

<br>

#### 7. order

> Can define the order of items

* Default value: `0`
* Can have negative values

<br>

#### 8. align-self

> Can specify alignment directly on an item

\ <br>

*flex allows `margin-top: auto`!*

\ <br>

#### Wrap-up

* justify - main axis
* align - cross axis
* content - multiple lines
* items - single line
* self - individual element


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://chloe-codes1.gitbook.io/til/web/css/04_grid_system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.