Shulou(Shulou.com)05/31 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.