flex布局 flex属性

flex

flex property is the short hand property for:

  1. flex-grow:a number specifying how much space will this item will grow relative to the rest of the flexiable items.The default value is 0. DEMO:https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-grow&preval=initial DEMO:https://codepen.io/HugoGiraudel/pen/9a9ad8fb040f5efaf4e749b49cae7281
  2. flex-shrink:a number specifying how much will this item will shrink relative to the rest of the flexiable items.The default value is 1. (when the value of the flex-shrink is 0,the item will just appear as in it’s original width,but in order to fit to the container,the default value of the flex-shrink is 1 ,which means that these items will shrink by default.)
    DEMO:https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-shrink&preval=1
  3. flex-basis:the length of the item.

The second(felx-shrink) and third(flex-basis) is optional.

截图来源(点击这里)

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

发布了83 篇原创文章 · 获赞 18 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/Abudula__/article/details/86651943