How to use flex-basis in css

Most people do not understand the knowledge points of this article "how to use flex-basis in css", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use flex-basis in css" article.

Concept

1. Flex-basis specifies the initial size of the flex element in the principal axis direction.

2. If you do not use box-sizing to change the box model, this attribute determines the width or height of the content box of the flex element (depending on the direction of the principal axis).

Grammar

/ * Specify * / flex-basis: 10emX flexripraf basis: 3pxFLY basis: auto; / * Intrinsic sizing keywords * / flex-basis: fill;flex-basis: max-content;flex-basis: min-content;flex-basis: fit-content; / * Automatically size based on the flex item's content * / flex-basis: content; / * Global values * / flex-basis: inherit;flex-basis: initial;flex-basis: unset

Example

In column mode, flex-basis becomes height, because the container height is 100px, where the child element height is set to 30px total 90px to have an effect:

Flex {flex-direction: column;} .flex > * {flex-basis: 30px;} the above is about "how to use flex-basis in css". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about it, please follow the industry information channel.