Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the flex-basis property to set the width of the Flexbox frame in CSS. It is very detailed and has certain reference value. Friends who are interested must read it!

The property to use to specify the width of the Flexbox border is flex-basis.

Let's look at the specific code.

Flex-basis.css

.container {

Display:flex

}

.frameA {

Border:1pxsolid#e9006b

Flex-basis:64px

}

.frameB {

Border:1pxsolid#ff6a00

Flex-basis:128px

}

.frameC {

Border:1pxsolid#d0b106

Flex-basis:194px

}

.frameD {

Border:1pxsolid#4aae20

Flex-basis:256px

}

.frameE {

Border:1pxsolid#01b9b3

Flex-basis:320px

}

Flex-basis.html

The first content php Chinese website php Chinese website

The second content php Chinese website

The third content php Chinese website php Chinese website

The fourth content php Chinese website php Chinese website

The fifth content php Chinese website php Chinese website

Description: set the flex-basis property to the basic value of the width of the flexbox border. In this example, the values of 64 pixels, 128 pixels, 194 pixels, 256 pixels, and 320 pixels are set from the left frame.

The effect is as follows:

Use a Web browser to display the above HTML file. The page shown below is displayed. If the window width of the Web browser is greater than the width of the frame, the size of the specified frame is displayed. In the image below, 64px from left to right, 128pxMagi 194pxMagol 256px, you can see the width of the border of the 320px.

360 screenshot 20181108165606631.jpg

Even if the width of the window narrows, the width of the frame does not change if the width is greater than the width of the frame.

360 screenshot 20181108173422254.jpg

If the window width becomes narrower than the total width of the frame, the width of the frame shrinks.

360 screenshot 20181108173459142.jpg

Since we did not set a value for the flex-shrink property, the frame width of each frame will be reduced at the same rate. To change the frame reduction per frame, set the flex-shrink property. For more information about the behavior of flex-shrink properties, read this article.

360 screenshot 20181108173546213.jpg

We further reduce the width of the window. Even if you shrink the window, you can see that the ratio of the frame width to the width of the window is the same.

Add: when the window width is full of the display box

In the above example, if the window is wide, a margin is created on the right. You may want to display the frame to fill the window width.

If you make full use of the width of the window and display the frame, the flex-grow property is set in the Cs of the box. See this article for more information about the flex-grow attribute.

In the following code, because the flex-grow property is set in the rightmost frameD, when the width of the window is large, the banner of the rightmost box is displayed at the full width of the extended window.

Flex-basis.css

.container {

Display:flex

}

.frameA {

Border:1pxsolid#e9006b

Flex-basis:64px

}

.frameB {

Border:1pxsolid#ff6a00

Flex-basis:128px

}

.frameC {

Border:1pxsolid#d0b106

Flex-basis:194px

}

.frameD {

Border:1pxsolid#4aae20

Flex-basis:256px

}

.frameE {

Border:1pxsolid#01b9b3

Flex-basis:320px

Flex-grow:1

}

Flex-basis2.html

The first content php Chinese website php Chinese website

The second content php Chinese website

The third content php Chinese website php Chinese website

The fourth content php Chinese website php Chinese website

The fifth content php Chinese website php Chinese website

The above is all the content of the article "how to use the flex-basis property to set the Flexbox border width in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to 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.