Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)-CSS Tutorial-php.cn

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

不言

Release： 2018-11-08 17:55:08

Original

3594 people have browsed it

This article will share with you how to use the flex-shrink attribute in CSS. Friends in need can refer to it.

Use the flex-shrink property to specify the extent to which the frame width in Flexbox becomes smaller than necessary.

Syntax:

flex-shrink :(数量）

Copy after login

Code example:

flex-shrink.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="flex-shrink.css" />
  </head>
  <body>
  <div class="container">
    <div class="frameA">第一个内容<br/>php中文网<br />php中文网</div>
    <div class="frameB">第二个内容<br />php中文网<br /></div>
    <div class="frameC">第三个内容<br />php中文网<br />php中文网</div>
    <div class="frameD">第四个内容<br />php中文网<br />php中文网</div>
    <div class="frameE">第五个内容<br />php中文网<br />php中文网</div>
  </div>
  </div>
  </body>

Copy after login

flex-shrink.css

.container { 
   display: flex;
}
.frameA {   
    border: 1px solid #e9006b;    
    flex-shrink: 1;
}
.frameB { 
   border: 1px solid #ff6a00;    
   flex-shrink: 2;
}
.frameC {  
  border: 1px solid #d0b106;    
  flex-shrink: 3;
}
.frameD { 
   border: 1px solid #4aae20;    
   flex-shrink: 4;
}
.frameE { 
   border: 1px solid #01b9b3;    
   flex-shrink: 5;
}

Copy after login

Description:

We set frameA flex-shrink to 1, frameB flex-shrink to 2, frameC flex-shrink 3, frameD flex-shrink 4, frameE flex-shrink 5. This setting allows you to specify how much to reduce the width of the frame if it becomes narrower than required for text display. The frame is narrowed in a ratio of frameA:frameB:frameC:frameD:frameE = 1:2:3:4:5. (frameE shrinks much more than frameA.)

The effect is as follows:

Use a web browser to display the results of the above code. The page shown below is displayed.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

Reduce the window width. The width of each frame is still a width that allows content to be displayed unnecessarily when it doesn't have to be scaled down.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

If you shrink the window width further, the inner text will become wrapped and the frame width will shrink

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

Further Reduce the width of the frame. From the "first content" frame, it can be seen that the width of the "fifth content" frame shrinks sharply.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

#By narrowing the width further you can clearly see the extent of the change.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

It can be confirmed that the narrowing width of the frame is narrowed at the ratio of frameA: frameB: frameC: frameD: frameE = 1:2:3:4:5.

What to do when flex-shrink is specified in only one frame

Change the CSS to the following and specify flex-shrink in only one frame.

flex-shrink.css

.container {
    display: flex;
}
.frameA { 
   border: 1px solid #e9006b;    
   flex-shrink: 5;
}
.frameB { 
   border: 1px solid #ff6a00;
}
.frameC { 
   border: 1px solid #d0b106;
}
.frameD {  
  border: 1px solid #4aae20;
}
.frameE { 
   border: 1px solid #01b9b3;
}

Copy after login

Display the page on a web browser. When the window width is very wide, as in the previous case, each frame does not need to display the width.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

Reduce the window width of your web browser. If the contents of the frame are unnecessary, the size of the frame is not changed.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

In addition, if you shorten the window width, each frame width will become narrower and the text within the frame will wrap and display.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

#If you further narrow the window width, the width of the frame will also become narrower. You can see that the width of the first content frame shrinks compared to the other frames.

Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width)

So you can use Flexbox to set the shrinkage of the frame.

Supplement: If flex-shrink is not specified, the flex-shrink value will be treated as 1.

The above is the detailed content of Usage of flex-shrink attribute in css (reducing the width when the width of the frame is smaller than the page width). For more information, please follow other related articles on the PHP Chinese website!