Can the CSS "flex-basis" Property be Specified in Pixels?

The CSS flex-basis property can be set in pixels (px), which can be used to specify the initial size of a flex item in pixels.

For example, the following sets the flex-basis to 200px, setting the flex items (with the "flex-item" class) to have an initial size of 200 pixels:

.flex-item {
  flex-basis: 200px;
}

Besides pixels, the flex-basis property can accept various other units of measurement like percentages (%), ems (em), rems (rem), viewport units (vw, vh, vmin, vmax), and more. You can choose the best one for your specific use case based on your requirements.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.