AdvancedCSS AdvancedCSS-hub CSS css flexbox CSS3 flexbox HTML & CSS learn-advanced-css Tech

Creating Flexible Layouts with Flexbox — SitePoint

A list with display: flex applied to the ul containing element

The next introduction to Flexbox is an extract from Tiffany’s upcoming ebook, CSS Grasp, 2nd Version, which might be out there shortly.

Earlier than CSS Grid got here alongside, there was Flexbox (which is formally often known as the CSS Flexible Field Format Module). Flexbox was designed to handle format in a single path—a row (flex-direction: row or row-reverse) or a column (flex-direction: column or column-reverse). That’s in distinction to Grid, which accounts for rows and columns.

A primary versatile field format is straightforward to create: add show: flex or show: inline-flex to the containing factor. These values for show will set off a flex formatting context for that containing aspect’s youngsters. As with Grid, each flex and inline-flex are inside show modes. We set these values on the container, which behaves like a block-level or inline-level field, respectively. The youngsters of that container are then organized in response to the principles of flex format.

Observe: Older variations of Blink-based browsers similar to Chrome (≤ 28), and WebKit-based browsers like Safari (≤ eight), require a vendor prefix. In case your venture nonetheless helps these browsers, you’ll want to make use of show: -webkit-flex or show: -webkit-inline-flex. Older variations of Firefox (≤ 21) additionally require a prefix. Use -moz-flex and -moz-inline-flex to help these browsers.

By including show: flex or show: inline-flex to a containing factor, its quick youngsters turn into flex gadgets, as proven within the picture under. Flex gadgets could also be factor youngsters or non-empty textual content nodes. For example, the markup under generates three flex merchandise bins that every behave in response to the principles of flex format:

<div fashion=”display: flex”>
<span>This textual content is contained by a SPAN component.</span>
<b>This textual content is contained by a B factor.</b>
This textual content node continues to be a flex merchandise.
</div>

If no different properties are set, every flex merchandise may have the identical peak as its tallest factor (as decided by content material). It’ll additionally stack horizontally (or vertically when the doc has a vertical writing mode) with out wrapping, and with no area between the sides of every field. Flex gadgets might overflow the container.

A list with display: flex applied to the ul containing elementAn inventory with show: flex utilized to the ul containing component

This may increasingly not look like such an enormous deal, however it simplifies the code mandatory for a variety of consumer interface patterns. Let’s take a look at a few examples.

Take the next media object code:

<div class=”media__object”>
<img src=”http://www.sitepoint.com/video-thumb1.jpg”>
<div class=”media__object__text”>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>

Earlier than Flexbox, we’d have paired the previous markup with the next CSS:

.media__object img
float: left;
peak: auto;
width: 150px;

.media__object__text
padding-left: 170px;

/* Let’s use the clearfix hack! */
.media__object::after
content material: ‘ ‘;
show: block;
clear: each;

This format works, however it has one main disadvantage: it requires us to constrain the width of our photographs in order that we all know how a lot padding to make use of. That limits our capability to make use of this similar element in a number of contexts. It’s your decision a picture 150px large when this element is used for a “Related Stories” widget, and one which’s solely 75px broad for feedback.

Let’s do this utilizing Flexbox. Right here’s our up to date CSS:

.media__object
show: flex;

.media_object img
margin-right: 20px;

That’s so much much less CSS. An added bonus is that we don’t have to fret about how broad or tall our picture is. Nor do we now have to concern ourselves with clearing floats. Whether or not the picture is 200px extensive or 20px vast, .media__object__text will abut the margin field of our img factor.

Creating Flexible Type Elements with flex

One other use case for Flexbox is creating versatile, vertically aligned type elements. Think about the interface sample proven within the picture under.

A form field with an adjacent buttonA type subject with an adjoining button

Right here, we now have a type enter management and an adjoining button. Each are vertically aligned, and our button is 150px vast.

What if we would like our enter component to broaden to fill the out there area in its container? With out Flexbox, we’d want some JavaScript and hand-waving to replace the width of enter in response to modifications within the width of its mother or father. With Flexbox, nevertheless, we will simply use flex.

The flex property is definitely shorthand for 3 different properties.

  • flex-grow signifies that a component ought to develop if mandatory and have to be a constructive integer. Its preliminary worth is zero.
  • flex-shrink signifies that a component ought to shrink if mandatory and have to be a constructive integer. Its preliminary worth is 1.
  • flex-basis: signifies the preliminary or minimal width (when the flex axis is horizontal) or the peak of a component (when it’s vertical). It might be a size or proportion, or auto, and its preliminary worth is auto.

Although it’s attainable to set every of those individually, the specification strongly recommends utilizing the flex shorthand. Right here’s an instance:

div
show: flex;

enter[sort=”text”], button
border: zero;
font: inherit;

enter[sort=”text”]
flex: 1 zero auto;

button
background: #003;
colour: whitesmoke;
show: block;
text-align: middle;
flex: zero zero 150px;

Right here, we’ve used flex: 1 zero auto for our enter factor. Since its flex-grow worth is 1, it is going to develop to fill the out there area of its mum or dad. For the button factor, nevertheless, we’ve used flex: zero zero 150px. The zero values for flex-grow and flex-shrink forestall the width of the button from growing or reducing, whereas the flex-basis worth of 150px units its width.

As you’ll be able to see within the picture under, our button stays the identical measurement, however the width of enter expands to fill the remaining area.

The effect of flex: 0 0 150pxThe impact of flex: zero zero 150px

The tough bit about flex-grow and flex-shrink values is that they’re proportional. Sure, flex: 1 zero auto means our enter aspect can be wider than our button. However altering the worth of our button’s flex property to flex: 1 zero auto doesn’t essentially imply that each parts could have the identical measurement, as proven within the following picture.

Both items have the same flex value but are still different sizesEach gadgets have the identical flex worth however are nonetheless totally different sizes

As an alternative, flex gadgets can be resized to fill the container, taking their used min-width and max-width values under consideration (which can be their preliminary values).

Sadly, we will’t use fr models with the flex or flex-basis properties. Use size or proportion values as an alternative.

Vertical Centering with Flexbox

Lastly, let’s check out find out how to vertically middle content material with Flexbox. Vertically centering parts is among the harder duties to realize with CSS, notably if the peak of your content material is unknown. However with Flexbox, we require only one further line of CSS—align-items: middle:

.flex-container
show: flex;
align-items: middle;

Now our flex gadgets and their contents are vertically centered inside the flex container, as proven within the picture under.

Distributing flex items with align-items: centerDistributing flex gadgets with align-items: middle

Creating Grid-like Layouts with Flexbox

Typically, you’ll need to use Grid to create grid-like layouts. Nevertheless, chances are you’ll end up wanting packing containers that align when there’s a fair variety of gadgets, however broaden to fill the out there area when there’s an odd quantity.

A grid-like layout with expanding cellsA grid-like format with increasing cells

Right here’s the markup we’ll use:

<ul class=”flex-aligned”>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</li>

By default, flex gadgets don’t wrap. To realize the format above, we’ll have to make them wrap utilizing the flex-wrap property. It accepts three values: nowrap (the inital worth), wrap, and wrap-reverse. We’ll use wrap right here:

.flex-aligned
show: flex;
flex-wrap: wrap;

Now we simply want to point how our flex gadgets ought to behave, and what their most width ought to be. Since we would like a most of 4 columns, we’ll set our flex-basis worth to 25%. And since we would like our flex gadgets to increase to fill the obtainable area, we’ll set flex-grow to 1. We’ll hold flex-shrink at zero in order that our bins by no means occupy lower than 25% of their container:

.flex-aligned li
flex: 1 zero 25%;

Studying Extra about Flexbox

There’s much more to Flexbox than what we’ve coated right here. CSS-Tips’ “A Complete Guide to Flexbox” digs into all of the properties and values. You may also take a look at Philip Walton’s “Solved by Flexbox”, which showcases UI patterns which might be made simpler with Flexbox.

Selecting flex or grid

As you develop web page or element layouts, chances are you’ll end up questioning when it’s higher to make use of Flexbox and when to make use of Grid.

  • Use Grid once you need to organize parts into rows and columns that align each horizontally and vertically.
  • Use Flexbox once you need to organize gadgets in a row or a column, once you want to align gadgets vertically or horizontally, however not each.

Jen Simmons’ video “Flexbox vs. CSS Grid — Which is Better?” walks you thru some issues to think about when selecting between Grid and Flexbox. Rachel Andrew’s “Should I use Grid or Flexbox?” is one other nice useful resource for understanding each.

In apply, your tasks will in all probability combine each of those methods, in addition to floats. For example, you might use Grid to outline the general web page format, whereas utilizing Flexbox on your navigation menu or search field, and floats to put tables or photographs.