如何使用flex-direction：column正确显示块的实际宽度？ [英] How to get actual width of a block displayed with flex-direction:column properly?

问题描述

例如：

console.log($('.container').width()); // 600px as we defined in css.
console.log($('.list').width()); // 600px

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

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;
}

<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>

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

There is 10 boxes, and each box with 100px width, the actual width of element .list should be 1000px not 600px.

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

I tried to use the following method to get actual width of list: The left position of last child element and its outerWidth

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

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

What I want to know: is there a better method to get actual width of this kind of flexbox element? some better built-in javascript or jquery method exists for this?

推荐答案

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

As you've discovered, scrollWidth will provide you the dimension you're looking for. The reason that outerWidth isn't giving you the total width of the internal elements is that your .list element is actually 600px wide. The additional content is overflowing its parent, allowing it to display despite being outside of the .list.

您可以通过将 overflow 属性更改为隐藏 on .list ：

You can test this by changing the overflow property to hidden on .list:

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;
}

<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>

请注意，你运行它， .list 元素剪辑其余的框。

Note that when you run this, the .list element clips the remaining boxes.

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

Hopefully this helps you understand what is going on in addition to solving the problem for you. Cheers!

这篇关于如何使用flex-direction：column正确显示块的实际宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！