flex: 1 是哪些属性的缩写?

这篇具有很好参考价值的文章主要介绍了flex: 1 是哪些属性的缩写?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

flex:1是哪些属性的缩写?

flex:1 是 flex-grow: 1, flex-shrink: 1,flex-basis: 0% 的缩写;

解释下flex-grow

flex-grow是将剩余的空间,根据flex-grow的值平分,然后加到flex-basis上

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>flex-grow</title>
  </head>
  <body>
    <p>内容的宽度是500px,flex item的flex-basic是60px。</p>
    <p>AB 为 flex-grow:1CD为 flex-grow:4</p>
    <div id="content">
      <div class="box" style="background-color: red">A</div>
      <div class="box" style="background-color: lightblue">B</div>
      <div class="box1" style="background-color: yellow">C</div>
      <div class="box1" style="background-color: brown">D</div>
    </div>
  </body>
</html>

上述代码 的flex-basis加起来是240px,父容器分完以后剩下260px,ABCD的flex-grow加起来10,那么每一份是26px,最终AB是60px + 26px = 86px,CD是60px + 26px * 4 = 164px。
是不是特别像老爷子突然噶了留下500块钱的遗产,兄弟4个来分,老大和老二说“我要60块钱,如果有多的可以再给我来一份”,老三和老四说“我们也要60块钱,如果有多的我们要四份”。最终老大和老二分到86,老三老四分到164,大家还都挺满意

解释下flex-shrink


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>flex-shrink</title>
    <style>
      #content {
        display: flex;
        width: 500px;
      }
      .box {
        flex-shrink: 1;
      }
      .box1 {
        flex-shrink: 4;
      }
    </style>
  </head>
  <body>
    <p>内容的宽度是500px,flex item的flex-basic总和是1000px。</p>
    <div id="content">
      <div class="box" style="background-color: red; flex-basis: 100px">A</div>
      <div class="box" style="background-color: lightblue; flex-basis: 200px">B</div>
      <div class="box1" style="background-color: yellow; flex-basis: 300px">C</div>
      <div class="box1" style="background-color: brown; flex-basis: 400px">D</div>
    </div>
  </body>
</html>

上面例子
A的flex-basis 是100px, flex-shrink 是 1
B的flex-basis 是200px, flex-shrink 是 1
C的flex-basis 是300px, flex-shrink 是 4
D的flex-basis 是500px, flex-shrink 是 4
要平分的容量 NT = 100 + 200 + 300 + 400 - 500 = 500
最终A的宽度 = 100 - 100 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT =
83.87096774193549
B的宽度 = 200 - 200 * 1 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 167.74193548387098
C的宽度 = 300 - 300 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 106.45161290322582
D的宽度 = 400 - 400 * 4 / (100 * 1 + 200 * 1 + 300 * 4 + 400 * 4) * NT = 141.93548387096774文章来源地址https://www.toymoban.com/news/detail-845147.html

到了这里,关于flex: 1 是哪些属性的缩写?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [HTML]Web前端开发技术8(HTML5、CSS3、JavaScript )CSS样式属性,withborder,italic | oblique,indent,padding,——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 CSS属性值中的单位 CSS字体样式 font-size设置字号 字体样式font-style属性 字体系列font-family属性 字体变体

    2024年02月04日
    浏览(69)
  • css3-flex布局:基础使用 / Flexbox布局

    一、理解flex 二、理解Flex布局(又称Flexbox布局) Flex布局(又称Flexbox布局)是一种基于Web的CSS3布局模式,其目的是为了更加灵活和自适应地布置各种各样的网页元素。Flex布局通过将一个父容器分割为一个或多个弹性项目,使得这些项目能够按照一定规则相互排列,并且自动

    2024年02月12日
    浏览(46)
  • css之Flex弹性布局(父项常见属性)

    本篇博客会讲解css中的弹性布局的常见用法, 将一个div定义成flex容器,它分为主轴与交叉轴(其中左右边对应主轴的 start、end ,上下边对应交叉轴的 start、end ) 🪂行排列 flex-direction: row 🪂将行排列进行翻转排列 flex-direction: row-reverse 注意:由于翻转时主轴的start、end会进

    2024年02月08日
    浏览(50)
  • CSS选择器-CSS3属性

    持续更新… 1、CSS3的概念和优势 CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块、

    2024年02月11日
    浏览(42)
  • css3新增属性

    box-shadow: 10px 10px 10px rgba(54,54,54,0.36); 元素阴影,这个不会影响页面布局;分别指定如下参数: 水平偏移量,正数向右,负数向左 垂直偏移量,正数向下,负数向上 阴影模糊效果,数值越大越模糊 颜色 border-radius: 2px; 边框圆角半径,会影响box-shadow显示 border-top-left-radius bord

    2024年02月12日
    浏览(41)
  • css3 - 属性选择器

    2024年02月14日
    浏览(44)
  • CSS3渐变属性详解

    线性渐变 概念:线性渐变,指的是在一条直线上进行的渐变。在线性渐变过程中, 起始颜色会沿着一条直线按顺序过渡到结束颜色 语法: 渐变角度 线性渐变的“ 渐变角度 ”取值有两种: 一种是使用角度(单位为deg) 另一种是使用。 取值 属性值 对应角度 说

    2024年02月02日
    浏览(46)
  • CSS3渐变属性之重复渐变

    在网页设计中,经常会需要在一个背景上重复应用渐变方式的情况,这时就需要使用重复渐变。 概念:重复线性渐变只是在线性渐变的基础上加个repeating,代表连续重复的意思 语法: 说明:该语法用于定义渐变方式为重复线性渐变,括号内的参数取值和线性渐变的相同。 实

    2024年01月18日
    浏览(49)
  • css3 transtion属性的使用

    主要实现多个内容排列时从下到上过渡 或者 从左到右过渡。 思路:主要是利用flex布局的flex-direction属性和align-items属性。 flex-direction属性决定主轴的方向(即项目的排列方向) align-items属性定义项目在交叉轴上如何对齐。 一、从下到上过渡(方案1)  1.先上效果图 效果图

    2024年02月17日
    浏览(48)
  • 无涯教程-CSS3 - 3D转换属性

    使用3d变换,无涯教程可以将元素移动到x轴,y轴和z轴。下面的示例清楚地指定了元素将如何旋转。 以下方法用于调用3D变换- Sr.No. Value Remark 1 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 用于通过使用矩阵的16个值来变换元素 2 translate3d(x,y,z) 用于通过使用x轴,

    2024年02月20日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包