javascript - How to get actual width of a block displayed with flex-direction:column properly? - Stack Overflow

admin管理员组

文章数量:1279241

For Example:

HTML

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=".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>

For Example:

HTML

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

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());

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?

• javascript
• css
• flexbox

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked Jan 16, 2017 at 9:33 Cl0udSt0neCl0udSt0ne 53822 gold badges99 silver badges2020 bronze badges 3

• Is there a reason why you'd use column and finally have a "row" (well, blocks are wrapping) of blocks? Seems counter-intuitive in your demo :) – FelipeAls Commented Jan 16, 2017 at 11:36
• Using min-width: 600px; is OK if viewport is larger than your flex container. I doubt it's what you want to achieve though – FelipeAls Commented Jan 16, 2017 at 11:41
• @FelipeAls The final goal is a multi-row carousel, I use one row in demo to make question easier:) min-width is not OK, js still can't get actual width of list element. – Cl0udSt0ne Commented Jan 16, 2017 at 18:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

What I need is just el.scrollWidth.

Probably more code than you wanted, but you could just sum the width of the elements inside the div, using javascript with jQuery like this:

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

});

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

with a live example: https://jsfiddle/yeeqkd2e/4/

or without 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>";

Native Javascript: https://jsfiddle/yeeqkd2e/6/

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.

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>

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!

本文标签： javascriptHow to get actual width of a block displayed with flexdirectioncolumn properlyStack Overflow