flex-basis and width

Engaged ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

Hi,

Currently, my work has

main {

          display: flex;

}

.col1 {

           flex-basis: 30%;

}

.col2 {

           flex-basis: 15%;

}

.col3 {

          flex-basis: 55%;

}

If I replace flex-basis with width, is there any difference?

Global Invisible Hand

Hosun Kang

Q_Dw_46_width.png

Views

562

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jul 24, 2019 Jul 24, 2019

Hosun  wrote

Hi,

Currently, my work has

main {

          display: flex;

}

.col1 {

           flex-basis: 30%;

}

.col2 {

           flex-basis: 15%;

}

.col3 {

          flex-basis: 55%;

}

If I replace flex-basis with width, is there any difference?

Global Invisible Hand

Hosun Kang

No, there is no difference. The formatting will remain the same. There may be ocassions where flex-basis has some advantages (although I dont specifically know that to be true) but as you're specifying a percentage width for each column

...

Likes

Translate

Translate
LEGEND ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

Hosun  wrote

Hi,

Currently, my work has

main {

          display: flex;

}

.col1 {

           flex-basis: 30%;

}

.col2 {

           flex-basis: 15%;

}

.col3 {

          flex-basis: 55%;

}

If I replace flex-basis with width, is there any difference?

Global Invisible Hand

Hosun Kang

No, there is no difference. The formatting will remain the same. There may be ocassions where flex-basis has some advantages (although I dont specifically know that to be true) but as you're specifying a percentage width for each column there will be none in this instance.

Read more here

https://gedd.ski/post/the-difference-between-width-and-flex-basis/

From what I can deduce px width is used but since I rarely if ever use px width I have never encountered issues with either specifying a column percentage width  using flex-basis or width.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 24, 2019 Jul 24, 2019

Copy link to clipboard

Copied

LATEST

If you are using % or px values you are in effect setting to a specific value, (be that of the viewport of actual) which negates the 'flex' in flexbox.

If however you use a keyword like 'auto' you are setting the flex-basis to be dependant on the content, and available space for the container, as opposed to a given proportion. Once you start using the other flex properties such as 'grow' and 'shrink' you can then tell flexbox to grow or shrink the flexbox child element to fit, (or fill) the available viewport no matter what size. By using wrap, you can also tell it the 'how' of wanting the document to flow.

Just as a note, you should use the shorthand 'flex' property, as the individual properties are mainly for exeptions to the flex, and not the entire container.

see -

https://www.w3.org/TR/css-flexbox-1/#flex-common

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
express Get Adobe Express free

Easily make social graphics, flyers, logos, and more from thousands of free templates.

Get free app
Free to use, no credit card required