CODEWITHSUNDEEP
cssflexbox
Daniel
Daniel

Reputation: 15453

What is this flex styling is doing in plain English?

I need help understanding what flex: 0 0 673px is doing to my element in plain English.

I have read the CSS Trick docs and other MDN resources, and it does not help.

Upvotes: 1

Views: 75

Answers (3)

Ginger Wizard
Ginger Wizard

Reputation: 717

I am not sure what else I can explain that CSS tricks does not, however I will try.

The first value is the flex-grow value that defines how much of the remaining fraction it will grow by. In this case due to you setting it to 0 it means it will not grow and wont get any wider.

The second value is the flex-shrink value that defines how much of the remaining fraction it will shrink by. In this case due to you setting it to 0 it means it will not shrink and get any smaller in width.

The third value is the flex basis that determines what the base width should be when no other value is being calculated due to you setting it to 673px it means the width will be 673px.

If you where not using flex the current values you have is the same as width: 673px;

Upvotes: 2

Monday A Victor
Monday A Victor

Reputation: 471

The first value is the flex grow which is practically the size of the particular flex item relative to other flex items so if you give it a value of 2 the width will be two times the width of the remaining flex items. That is to say a flex grow of two where the width of a normal flex item is 20px will make that item 40px in size. The second value flex shrink does the opposite. The third flex-basis means that that flex item will not go beyond that size it's more like min-width in flex box context. #cheers

Upvotes: 1

MTCoster
MTCoster

Reputation: 6145

From MDN:

The flex property may be specified using one, two, or three values.

[...]

Three-value syntax:

From this, we can tell that flex: 0 0 673px; is shorthand, but it doesn’t really tell us what each value means. Here’s the equivalent in longhand:

flex-grow: 0;
flex-shrink: 0;
flex-basis: 673px;

So let’s take a look at each of those properties in turn. Let’s start with flex-basis, because it has ‘basis’ in the name and sounds like a good place to start.

flex-basis:

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the content box unless otherwise set with box-sizing.

Calculating a flex layout is a process with several stages. Ignoring the part about box-sizing, this property tells the layout engine to start by setting every element to this size in the flex direction. It has some other special values (detailed on MDN), but this is the gist of it.

flex-grow:

The flex-grow CSS property sets how much of the available space in the flex container should be assigned to that item (the flex grow factor).

If the flex container is larger than the combined basis size of every element inside it, the layout engine will stretch and/or spread the elements to fill the container. This property specifies a sort of scale factor; an element with flex-grow set to 2 will stretch twice as much as one set to 1. A value of 0 tells the layout engine to never stretch this element.

flex-shrink:

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of flex items is larger than the flex container, items shrink to fit according to flex-shrink.

So we know how to fill a larger container. But what if the container is too small? The same principle is applied, only this time using the flex-shrink property. Note that using 0 for this can cause the flex elements to overflow their container.

Upvotes: 2

Related Questions