首页 > 试题广场 >

在一个行内元素中，显示了不同的三部分内容，若想要这三个内容以

[单选题]
在一个行内元素中，显示了不同的三部分内容，若想要这三个内容以 1:1:1 的比例分配宽度，该如何实现（      ） 
  • position:relative; -webkit-box-flex: 1;  box-flex: 1; -webkit-flex:1; flex:1;
  • position:absu; box-flex: 1; -webkit-flex:1; flex:1;
  • position:relative; -webkit-box-flex: 1;  box-flex: 1;
  • position:relative;  box-flex: 1; -webkit-flex:1; flex:1;
查看正确选项
添加回答
益阳雷佳音头像 益阳雷佳音
评论一群复读机也不知道他们想干嘛说又没说明白这题到底咋做
发表于 2020-08-15 20:24:37 回复(2)
诺噢h头像 诺噢h

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。

发表于 2020-08-09 10:12:24 回复(0)
xc_silence头像 xc_silence
box-flex 属性规定框的子元素是否可伸缩其尺寸，所有的flex都是相对的。
例如：父容器宽度为300px
子元素box-flex：1：1：1，则每个子元素宽100px;
子元素box-flex：1：2：1，则子元素大小分别为75px、150px、75px;
发表于 2020-09-02 15:19:46 回复(0)
魔法少女白小咩头像 魔法少女白小咩
我觉得答案想表达的是四种解决方法，不同浏览器或应用进行适配
 box-flex不适用于web，所以Firefox 支持替代的 -moz-box-flex 属性，Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。
-webkit-flex：Webkit内核的浏览器，必须加上-webkit前缀。
普通弹性盒子：flex:1
-webkit-box-flex: 1；/ box-flex: 1;/ -webkit-flex:1;/ flex:1;

发表于 2022-01-25 10:20:06 回复(0)
牛客526537371号头像 牛客526537371号
为什么是relative
发表于 2021-10-08 14:09:03 回复(0)
桌子LZT头像 桌子LZT
box-flex 属性规定框的子元素是否可伸缩其尺寸,默认是0，不可伸缩。 该属性是非标准的，必须加前缀保证兼容性。 flex的值的完整写法是[<flex-grow> <flex-shrink> <flex-basis>] 当flex为none时,等同于flex: 0 0 auto; 当flex为auto时，等同于flex: 1 1 auto; 当flex取值为一个数字，则该数字是设置的flex-grow值，其它两个属性用初始值，如flex:1时，等同于flex: 1 1 0% </flex-basis></flex-shrink></flex-grow>
发表于 2020-10-24 04:49:21 回复(0)
牛客211466278号头像 牛客211466278号
box-flex:指定子元素是否会跟着父元素的变化而变化,值是相对的
如:<style>div{width:300px;-webit-display:block;}注:若写了display:block则子元素则是按比例分宽,若没有则是按比例分高,这里需要注意浏览器兼容问题
.box1{-webkit-box-flex:1;border:1px solid red;}
.box2{-webkit-box-flex:2;border:1px solid blue}</style>
<body><div><div class="box1">box1</div><div class="box2">box2</div></div></body>
结果如下:

发表于 2021-10-16 23:52:15 回复(1)
宇第一i帅头像 宇第一i帅
box-flex 属性规定框的子元素是否可伸缩其尺寸。
伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。
 
box-flex: value;
元素的可伸缩行。柔性是相对的，例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。

目前没有浏览器支持 box-flex 属性。

Firefox 支持替代的 -moz-box-flex 属性。

Safari、Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性。


编辑于 2021-09-01 14:02:20 回复(0)
肖宇晨头像 肖宇晨
1.flex-box:是在子元素上设置或检索伸缩盒，使用浮点数来决定子元素如何分配父元素的剩余空间（IE不支持喔~）
2.设置时要加前缀-webkit- ,只有火狐是-moz-
3.注意：flex-box分配的是父元素的剩余空间!
<style>
ul{
    width:200px;
    height:40px;
    display:-webkit-box;
}
    /* 这里第一轮 每个li先割分父元素ul 20*3=60px宽度 */
li{
    width:20px;
}
    /* 这里第二轮 每个li按比例分割父元素剩余的 200-60=140px宽度
       分别为 140*1/7=20px  140*2/7=40px  140*4/7=80px
    */
li:nth-child(1){
    -webkit-box-lex:1;
}
li:nth-child(2){
    -webkit-box-lex:2;
}
li:nth-child(3){
    -webkit-box-lex:4;
}
/*  最终li宽度分别为 20+20=40px   20+40=60px  20+80=100px   */
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
编辑于 2020-12-09 13:28:31 回复(0)
Hayle头像 Hayle
box-flex是非标准的
发表于 2020-08-10 19:44:20 回复(0)
阿侯头像 阿侯

CSS3 box-flex 属性

编辑于 2019-03-12 21:31:55 回复(0)
小肥宅冲冲冲！！头像 小肥宅冲冲冲！！ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #b{
            width: 300px;
            background-color: antiquewhite;
            position: relative;
            display: -webkit-box;/*平分宽度，如果不设置就是平分高度*/
        }
        #a1,#a2,#a3{
            -webkit-box-flex: 1;  /*box-flex 属性规定框的子元素是否可伸缩其尺寸*/
            /* box-flex: 1;  */     /*flex是相对的 如果下面两行注释掉 将不是1：1：1*/
            -webkit-flex:1;      
            flex:1;
        }
        #a1{
            background-color: aqua;
        }
        #a2{
            background-color: blue;
        }
        #a3{
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div id="b">
      <div id="a1">fsadf</div>
      <div id="a2">fas</div>
      <div id="a3">fsadfas</div>
    </div>
</body>
</html>

但是我还有个问题，题目中说的不是行内元素吗？行内元素不是指a span br i em strong label q var cite code，为什么评论中全部都是以块状元素举例？
编辑于 2022-03-02 09:59:20 回复(0)
formoney头像 formoney
box-flex
box-flex属性是非标准的，不建议使用；目前没有浏览器支持 box-flex 属性。
box-flex：属性指定 box 的子元素是否灵活或固定的大小； 
{
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    border:1px solid red;
}
flex：

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

注意：如果元素不是弹性盒模型对象的子元素，则 flex 属性不起作用。

语法：flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

发表于 2021-08-19 13:43:35 回复(0)
🇺SunshineBoy头像 🇺SunshineBoy
现在box-flex是一种非标准属性，，需要加浏览器前缀属性
发表于 2021-03-04 14:14:50 回复(0)
hloton头像 hloton
position: relative; 并不是直接用于分配宽度的，但在这里它并不会影响宽度的分配。它通常用于定位元素的子元素。
-webkit-box-flex: 1; 是旧版WebKit浏览器（如较老版本的Safari和Chrome）使用的弹性盒子模型属性，用于分配子元素的宽度。
box-flex: 1; 是与上面类似的属性，但支持范围更广，包括Firefox和一些其他浏览器。
-webkit-flex: 1; 和 flex: 1; 是现代浏览器（包括最新版本的Chrome、Firefox、Safari等）支持的弹性盒子模型属性，用于分配子元素的宽度。
这些属性组合在一起可以确保不同浏览器都能够正确地将子元素的宽度按照1:1:1的比例分配。
编辑于 2024-03-29 22:05:25 回复(0)
牛客366756079号头像 牛客366756079号
三短一长选最长。
发表于 2022-07-27 17:02:01 回复(0)
未来大神头像 未来大神
虽然我知道用弹性伸缩盒，搞了好多兼容我并不懂，学废了
发表于 2022-03-09 16:14:30 回复(0)
lemon丶🐳头像 lemon丶🐳
box-flex   要先设置父盒子的display：box；
flex  要先设置父盒子的display：flex；
选项 C 难道不对吗？
编辑于 2021-03-22 20:25:17 回复(0)
僧妹头像 僧妹
flex-box分配的是父元素的剩余空间!
发表于 2021-01-24 17:19:34 回复(0)
提交观点

问题信息

CSS 前端工程师 京东 2019 HTML
上传者：小小
难度：
19条回答 3598浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号