# Notes: Flexbox ### Introduction to Flexbox Flexbox is a one-dimensional model that only deals with one dimension at a time: row or column. However, it often produces two-dimensional layouts because it has a wrap property that allows elements to wrap around, giving the appearance of multiple rows or columns. To use Flexbox, we need to apply the following properties * Set parent container to `display: flex` * Set `flex-direction` to column or row: `flex-direction: column | row` * Use `justify-content` To distribute children along the primary axis: `justify-content: center` * Use `align-items` To distribute children along the cross-axis: `align-items: center`
Flex DirectionPrimary Axis: justify-contentCross-Axis: align-items
ColumnVerticalHorizontal
RowHorizontalVerticl
### Flex Row Example Items are laid out by row and are centered across the row using `justify-content.` ```html
1
2
3
```

Row Flex with JustifyContent Center

### Column Flex Example Items are laid out by column and are centered across the row using `align-items.` ```
1
2
3
```

Flex Direction Column and Item Aligned to Center Within Row

### Flex Box Wrap The ability for this one-dimensional layout to wrap is what makes this a good choice for Responsive websites. In the code below, we have set up a centered, row wrap. ```html
A
B
C
D
``` The result on a screen wider than 600 px is shown below.

Row Wrap 600px Wide Divs

The result on a screen less than 600px is this:

Row wrap on screen less than 600px

This ability to spread content on a larger screen and contract to a single row on a smaller screen makes Flex so helpful when creating responsive web pages. ### Centering Content on a Page Using FlexBox To center the elements on a page using FlexBox, we use the `flex-direction:column` to line up the element in a column. The align-items property lines up elements on the cross-axis, so horizontally. The code below demonstrates how to apply box model properties to achieve centered content. ```html

This Header is Centered

This element has is centered.

``` The result is a page where the header and paragraph are both centered.

Centering Content with FlexBox

### Resources [MDN Basic Concepts of Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) --- # 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://rpeltz.gitbook.io/introduction-to-web-development/week-2-css/using-css-for-layout/notes-flexbox.md?ask= ``` 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.