Wrap Battling
Tags: css, webdev, joke
Published: 2023-03-06 16:57:15

---
title: Wrap Battling
published: true
description: comiCSS cartoon for March 6, 2023
tags: css,webdev,showdev,joke
canonical_url: https://comicss.art/blog/#wrap-battling
---

![Cartoon titled 'Wrap Battling' showing two rappers singing/battling about flex-wrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32xojvg96ixaa988e3oy.png)


Rap battling (or [battle rap](https://en.wikipedia.org/wiki/Battle_rap)) is a type of rap performance in which two or more rappers sing against each other (generally including some insults/attacks). [Today’s comic](https://comicss.art/?id=77) plays with the homophones Rap and Wrap to make a silly joke with Flexbox and [the `flex-wrap` property](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap).

A flex container will lay out the content in a single line by default. This may be Ok, but if the items’ size exceeds the container, they will be squeezed or they will overflow. So instead, we may want to get the content into multiple lines. This is where `flex-wrap` comes into action.

This property defines if a flex container will be single-line or multi-line (depending on the amount and size of the flex items), and in the case of multi-line, it defines how the items will be stacked after wrapping.

`flex-wrap` has three main values:

- `nowrap`: the items will not wrap; instead, they will adjust their size or overflow the parent. (This is the default value.)
- `wrap`: the items will wrap instead of overflowing the flex container. They will stack from cross-start to cross-end.
- `wrap-reverse`: the items will wrap instead of overflowing the flex container. They will stack from cross-end to cross-start.

The cross-start and cross-end part may sound complicated, but it is easier than what it sounds. It depends on the direction of the flex: if the direction is horizontal (“row”), then the wrapped elements will stack vertically (in rows); and if the direction is vertical (“column”), the wrapped elements will stack horizontally (in columns).

Let’s check an example with a flex container with 5 items with a defined width. By default, the value of `flex-wrap` is "nowrap", so the flex items will overflow the container (I put it as an image to avoid the annoying horizontal overflow it would create):


![box with 5 numbered boxes inside, they overflow the width](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jssl5ivnv27dak6rxjwd.png)



Now, if we change the code to set a value of “wrap” for `flex-wrap`, when the flex items would overflow the container, they wrap into a new row instead:


![box with 5 numbered boxes inside, they wrap: 1, 2, and 3 are on top; and 4 and 5 are at the bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74a7npgud36w3rc7r27y.png)


But if we set `flex-wrap` to "wrap-reverse", then the direction of the wrapping is the opposite: instead of getting into a new row, the wrapped elements _push_ the others into a new row.

![box with 5 numbered boxes inside, they wrap: 1, 2, and 3 are on bottom; and 4 and 5 are at the top](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmmptfe5p8f7nn6k35w4.png)


One last example with the `flex-direction` set to "column." In this case, the elements organize vertically in columns, so when they wrap, they do it in columns instead of rows:


![box with 5 numbered boxes inside, they are wrapped into 2 columns (3 rows): 1 and 4 at the top, 2 and 5, below, and 3 at the bottom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2osy7n1a58rc23xagp7r.png)


I hope these examples were useful and that you enjoyed [today’s comic](https://comicss.art/?id=77). Learn more about `flex-wrap` on the following sources:

- [MDN article on flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap)
- [CSS Tricks: A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [Josh W Comeau: An Interactive Guide to Flexbox](https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/#wrapping-14)