> For the complete documentation index, see [llms.txt](https://rpeltz.gitbook.io/introduction-to-web-development/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rpeltz.gitbook.io/introduction-to-web-development/week-2-css/using-css-for-layout/notes-flexbox.md). # 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)