设为首页 加入收藏

手机版 郑州清新教育-郑州电脑设计培训学校典范,专业课程包括:室内家装建筑装饰设计培训学习班,平面广告网页美工动漫设计培训,淘宝开店美工运营推广网站手机开发培训等课程
郑州清新教育电话

当前位置:首页 > 网页美工设计

网页美工设计

css中的flex:1;具体指的是什么意思

编辑: 时间:2018-09-05 08:34:13

   首先明确一点是, flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况:

  flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值,则 flex 的默认值是 0 1 auto。同理,如下是等同的:

  .item {flex: 2333 3222 234px;}

  .item {

  flex-grow: 2333;

  flex-shrink: 3222;

  flex-basis: 234px;

  }

  当 flex 取值为 none,则计算值为 0 0 auto,如下是等同的:

  .item {flex: none;}

  .item {

  flex-grow: 0;

  flex-shrink: 0;

  flex-basis: auto;

  }

  当 flex 取值为 auto,则计算值为 1 1 auto,如下是等同的:

  .item {flex: auto;}

  .item {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: auto;

  }

  当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下是等同的:

  .item {flex: 1;}

  .item {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: 0%;

  }

  当 flex 取值为一个长度或百分比,则视为 flex-basis 值,flex-grow 取 1,flex-shrink 取 1,有如下等同情况(注意 0% 是一个百分比而不是一个非负数字):

  .item-1 {flex: 0%;}

  .item-1 {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: 0%;

  }

  .item-2 {flex: 24px;}

  .item-1 {

  flex-grow: 1;

  flex-shrink: 1;

  flex-basis: 24px;

  }

  当 flex 取值为两个非负数字,则分别视为 flex-grow 和 flex-shrink 的值,flex-basis 取 0%,如下是等同的:

  .item {flex: 2 3;}

  .item {

  flex-grow: 2;

  flex-shrink: 3;

  flex-basis: 0%;

  }

  当 flex 取值为一个非负数字和一个长度或百分比,则分别视为 flex-grow 和 flex-basis 的值,flex-shrink 取 1,如下是等同的:

  .item {flex: 2333 3222px;}

  .item {

  flex-grow: 2333;

  flex-shrink: 1;

  flex-basis: 3222px;

  }

  flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况:

  auto:首先检索该子元素的主尺寸,如果主尺寸不为 auto,则使用值采取主尺寸之值;如果也是 auto,则使用值为 content。

  content:指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值,等效的替代方案是 flex-basis 和主尺寸都取 auto。

  百分比:根据其包含块(即伸缩父容器)的主尺寸计算。如果包含块的主尺寸未定义(即父容器的主尺寸取决于子元素),则计算结果和设为 auto 一样。

求学问答专业答复,快速响应
电话:0371-63218905
手机:13613841515
QQ:
有问题需要老师在线解答? 立即提问 马上回复
更多 热门课程排行榜
郑州清新教育电脑学校

室内家装设计知识平面广告设计知识网页美工设计知识

模具机械设计知识电脑办公文秘知识游戏动漫设计知识

郑州清新教育电脑学校

清新教育新闻资讯清新教育报班选课清新教育就业服务

关于清新教育联系清新教育清新教育乘车路线

关于我们 版权所有:郑州清新教育(www.qingxinedu.cn)备案号:豫ICP备11011661号