Question

例如：

HTML

＆＃13;

console.log($('.container').width()); // 600px as we defined in css.
console.log($('.list').width()); // 600px

console.log($('.box').eq('-1').position().left + $('.box').outerWidth());

＆＃13;

body{padding:0;margin:0;}
.container {
  width: 600px;
  backround:#E1BEE7;
}

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height:120px;
  background:#FFCDD2;
}

.box {
  margin:10px;
  flex-shrink:0;
  flex-grow:0;
  flex-basis:auto;
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: #F44336;
  color:#FFF;
  font-size:2rem;
}

.result{
  padding:1rem;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="list">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>

＆＃13;

有10个盒子，每个盒子的宽度为100px，元素.list的实际宽度应该是1000px而不是600px。

我尝试使用以下方法获取列表的实际宽度：最后一个子元素的左侧位置及其外部宽度

console.log($('.box').eq('-1').position().left + $('.box').outerWidth());

我想知道的是：有没有更好的方法来获得这种flexbox元素的实际宽度？为此存在一些更好的内置javascript或jquery方法？

Answer 1

我需要的只是el.scrollWidth。

Answer 2

正如您所发现的，scrollWidth将为您提供您正在寻找的维度。 outerWidth未给出内部元素总宽度的原因是您的.list元素实际上是600px宽。附加内容溢出其父级，允许它显示在.list之外。

您可以通过将overflow属性更改为hidden上的.list来对此进行测试：

＆＃13;

body{ padding:0; margin:0; }
.container {
  width: 600px;
}

.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 120px;
  background: #FFCDD2;
  overflow: hidden;
}

.box {
  margin:10px;
  flex-shrink:0;
  flex-grow:0;
  flex-basis:auto;
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: #F44336;
  color:#FFF;
  font-size:2rem;
}

.result{
  padding:1rem;
}

＆＃13;

<div class="container">
  <div class="list">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>

＆＃13;

请注意，运行此选项时，.list元素会剪切剩余的框。

希望除了为您解决问题之外，这有助于您了解正在发生的事情。干杯！

Answer 3

可能比你想要的代码多一些，但是你可以将div中的元素的宽度相加，使用javascript和jQuery这样：

var totalWidth = 0;
$('.box').each(function() {
  totalWidth += $(this).width();

});

$('#msg').html(
  "<p>totalWidth: " + totalWidth + "</p>"
);

使用实例：https://jsfiddle.net/yeeqkd2e/4/

或没有jQuery

var totalWidth = 0;

var cont = document.getElementsByClassName('box');
for (var i = 0, len = cont.length; i < len; i++) {
    totalWidth += cont[i].offsetWidth;
}

document.getElementById('msg').innerHTML = "<p>totalWidth: " + totalWidth + "</p>";

原生Javascript：https://jsfiddle.net/yeeqkd2e/6/

如何使用flex-direction：column正确显示块的实际宽度？

HTML

3 个答案: