相关疑难解决方法(0)

flex-basis和width之间有什么区别？

有关于此的问题和文章,但据我所知,没有任何结论.我能找到的最好的总结是

flex-basis允许您在计算任何其他内容之前指定元素的初始/起始大小.它可以是百分比或绝对值.

...这本身并没有说明基于柔性基组的元素的行为.根据我目前对flexbox的了解,我不明白为什么它也无法描述宽度.

我想知道flex-basis与实际宽度的不同之处:

如果我用flex-basis替换宽度(反之亦然),那么会在视觉上改变什么？
如果我将两者设置为不同的值会发生什么？如果它们具有相同的值会发生什么？
是否存在一些特殊情况,使用宽度或柔性基础与使用另一个有明显区别？
如何宽度和柔性基础上与其他Flexbox的风格,如配合使用时,不同的柔性包装,柔性成长和弹性收缩？
还有其他重大差异吗？

编辑/澄清:这个问题已经以不同的格式询问了什么是flex-basis属性集？但我觉得更直接的比较或总结柔性基础和宽度(或高度)的差异将是不错的.

css css3 flexbox

jpe*_*emi

2017 05-23

196
推荐指数

5
解决办法

6万
查看次数

Chrome不会根据孩子的内容展开flex父级

我需要在彼此旁边显示几个方框.每个框都有可变数量的子项.父母应根据子项目占用的空间进行扩展.物品的宽度固定很重要.我正在使用flexbox进行布局.它应该如下所示:

我写了一篇Plunkr来说明.

问题:当孩子占用更多空间时,Chrome不会扩展父级.子项目显示在父母的边界之外并出现在邻近的父级中,导致这种混乱:

具有讽刺意味的是,如果你在IE 11或Edge中打开Plunkr,它运行正常.

我究竟做错了什么？

这是一段代码片段:

body {
  display: flex;
  overflow: scroll;
}

.parent {
  border: 1px solid grey;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.items {
  display: flex;
}

.items span {
  flex-basis: 25px;
  flex-shrink: 0;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
  <h4>Parent 1</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 2</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span>
  </div>
</div>
<div class="parent">
  <h4>Parent 3</h4>
  <div class="items">
    <span>i1</span>
    <span>i2</span>
    <span>i3</span>
    <span>i4</span>
    <span>i5</span> …

Run Code Online (Sandbox Code Playgroud)

html css google-chrome css3 flexbox

fik*_*tra

2017 08-03

7
推荐指数

1
解决办法

1729
查看次数