CSS Flexbox 弹性布局：「12」使用 flex 简写属性设置项目显示方式

路条编程 2020-10-14

311

欢迎关注路条编程的公众号，通过学习 CSS Flexbox 弹性布局这一系列文章，你将会逐步掌握 Flex 布局相关的知识。

使用 flex 简写属性设置项目显示方式。

之前文章介绍的几个 flex 属性有一个简写方式。flex-grow、flex-shrink 和 flex-basis 属性可以在 flex 中一同设置。

例如，flex: 1 0 10px; 会把项目属性设为 flex-grow: 1 ，flex-shrink: 0 以及 flex-basis: 10px

属性的默认设置是 flex: 0 1 auto;。

flex 属性语法示例如下所示：

<style type="text/css">
.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
</style>

flex 属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto 。后两个属性可选。该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议您使用此速记属性，而不是设置各个属性。速记属性可以智能地设置其他属性值。

调整模块 13，增加样式类 .flex-grow, flex 属性值为 3 1 auto; , 样式类.flex-shrink，属性 flex 值为 1 2 auto; ，样式类 .flex-basis ，属性 flex 值为 flex: 0 1 10px; 。在容器中增加 3 个项目，项目 1 至 3 的样式类分别为 .flex-grow、.flex-shrink 、.flex-basis。调整的样式类如下所示：

<style type="text/css">
  .flex-grow {
    flex: 3 1 auto;
  }


  .flex-shrink {
    flex: 0 2 auto;
  }


  .flex-basis {
    flex: 0 1 10px;
  }
</style>

调整的 html 代码如下所示：

<article class="article  ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-12 ant-col-lg-12 ant-col-xl-6">
<div class="card">
    <div class="container title justify-content-center">flex 属性示例</div>
    <div class="container ft12 ">flex: 是flex-grow, flex-shrink 和 flex-basis的简写</div>
    <div class="container-dashed wrap align-content-between">
        <div class="box box-item1 flex-grow">1</div>
        <div class="box box-item2 flex-shrink">2</div>
        <div class="box box-item3 flex-basis">3</div>
    </div>
</div>
</article>

保存页面代码，预览页面，整体效果图如下所示：

重要提示：示例效果预览，请访问 https://www.icoderoad.com , 完整代码查看及下载，请访问 https://github.com/icoderoad/demo。

今天就讲到这里，如果有问题需要咨询，大家可以直接留言或扫下方二维码关注公众号。也可以添加 happyzjp 微信受邀加入学习社群，我们会尽力为你解答。

作者：路条编程（转载请获本公众号授权，并注明作者与出处）

数据库

文章转载自路条编程，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

CSS Flexbox 弹性布局：「12」使用 flex 简写属性设置项目显示方式

评论