> For the complete documentation index, see [llms.txt](https://web-dev-guide.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://web-dev-guide.wishtack.io/responsive-web-design/flex-layout.md).

# Flex Layout

Flexbox layout dynamically modifies its child elements sizes to fill out the available area.

```markup
<div class="wt-flexbox-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
```

```css
.wt-flexbox-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.wt-flexbox-container>div {

    border-style: solid;
    border-width: 1px;
    padding: 10px;
    text-align: center;

    flex: 1;
    min-width: 200px;

}
```

<https://codepen.io/younes-jaaidi/pen/KxooqG>

{% embed url="<https://codepen.io/younes-jaaidi/pen/KxooqG>" %}

## More Links

<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>

{% embed url="<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>" %}