basscss-flexbox

These flexbox-based utilities can replace the need for a grid system in many instances, and provide powerful constraint-based micro-layout solutions. To learn more about the flexbox module, see [Using CSS flexible boxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) and the [CSS Flexible Box Layout Module Specification](https://www.w3.org/TR/css-flexbox-1/). To set a container to display flex, add the `.flex` class. ```html <div class="flex"> <div>Hamburger</div> <div>Hot Dog</div> </div> ``` To set a container to display flex at certain breakpoints, use the `.sm-flex`, `.md-flex`, and `.lg-flex` styles. ```html <div class="sm-flex"> <div>Hamburger</div> <div>Hot Dog</div> </div> <div class="md-flex"> <div>Hamburger</div> <div>Hot Dog</div> </div> <div class="lg-flex"> <div>Hamburger</div> <div>Hot Dog</div> </div> ``` To set a flexbox container to column direction, use `.flex-column`. ```html <div class="flex flex-column"> <span>Hamburger</span> <span>Hot Dog</span> </div> ``` To enable wrapping of flexbox containers, use `.flex-wrap`. ```html <div class="flex flex-wrap"> <div class="col-4">Hamburger</div> <div class="col-4">Hamburger</div> <div class="col-4">Hamburger</div> <div class="col-4">Hamburger</div> <div class="col-4">Hamburger</div> </div> ``` To set a flexbox item to automatically fill the available space, use the `flex-auto` utility. ```html <div class="flex border"> <div class="flex-auto border">Hamburger</div> <div class="border">Hot Dog</div> </div> ``` To prevent a flexbox item from growing or shrinking, use the `flex-none` utility. ```html <div class="flex border"> <div class="flex-none border">Hamburger</div> <div class="border">Hot Dog</div> </div> ``` To control alignment of flexbox items, use the `align-items` utilities. These styles uses a shorthand naming convention. `items` for the `align-items` property and `start` and `end` for the `flex-start` and `flex-end` values. ```html <div class="flex items-start border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-end border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-center border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-baseline border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-stretch border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> ``` To align flexbox items on an item-by-item basis, use the `align-self` utilities. These override values set by the `align-items` property. A shorthand naming convention of `self` for the `align-self` property is used. ```html <div class="flex items-center border"> <h1 class="self-start border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-center border"> <h1 class="self-end border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-start border"> <h1 class="self-center border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-center border"> <h1 class="self-baseline border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex items-center border"> <h1 class="self-stretch border">Hamburger</h1> <div class="border">Hot Dog</div> </div> ``` To control the spacing for items on the main axis, use the `justify-content` utilities. These styles use a shorthand naming convention. `justify` for the `justify-content` property and `around` and `between` for the `space-around` and `space-between` values. ```html <div class="flex justify-start border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex justify-end border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex justify-center border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex justify-between border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> <div class="flex justify-around border"> <h1 class="border">Hamburger</h1> <div class="border">Hot Dog</div> </div> ``` To align items along the cross-axis, use the `align-content` utilities. A shorthand naming convention `content` is used for the `align-content` property. ```html <div class="flex flex-wrap content-start border" style="min-height: 128px"> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> </div> ``` ```html <div class="flex flex-wrap content-end border" style="min-height: 128px"> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> </div> ``` ```html <div class="flex flex-wrap content-center border" style="min-height: 128px"> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> </div> ``` ```html <div class="flex flex-wrap content-between border" style="min-height: 128px"> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> </div> ``` ```html <div class="flex flex-wrap content-around border" style="min-height: 128px"> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> </div> ``` ```html <div class="flex flex-wrap content-stretch border" style="min-height: 128px"> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> <div class="col-6 border">Hamburger</div> </div> ``` To change the order of flexbox items, use the `order` utilities. ```html <div class="flex"> <div class="order-2">.order-2</div> <div class="order-1">.order-1</div> <div class="order-last">.order-last</div> <div class="order-3">.order-3</div> <div class="order-0">.order-0</div> </div> ```