Вопрос по flexbox, javascript, css, css3 – https://jsfiddle.net/yeeqkd2e/6/

0

мер:

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.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 блоков, и каждый блок шириной 100 пикселей, фактическая ширина элемента.list должно быть 1000px, а не 600px.

Я попытался использовать следующий метод для получения фактической ширины списка: левая позиция последнего дочернего элемента и его externalWidth

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

Что я хочу знать: есть ли лучший способ получить фактическую ширину такого типа элемента flexbox? для этого существует какой-то лучший встроенный метод javascript или jquery?

Есть ли причина, по которой вы бы использовалиcolumn и, наконец, есть «ряд» (ну, блоки обертывают) блоков? Кажется нелогичным в вашем демо :) FelipeAls
@FelipeAls Конечная цель - многострочная карусель, я использую одну строку в демонстрации, чтобы облегчить вопрос :) min-width не в порядке, js по-прежнему не может получить фактическую ширину элемента списка. Cl0udSt0ne
С помощьюmin-width: 600px; в порядке, если область просмотра больше, чем ваш flex-контейнер. Я сомневаюсь, что это то, что вы хотите достичь, хотя FelipeAls

Ваш Ответ

3   ответа
0

scrollWidth предоставит вам измерение, которое вы ищете. Причина того, чтоouterWidth не дает вам общую ширину внутренних элементов в том, что ваш.list элемент на самом деле 600px в ширину. Дополнительный контентпереполненный его родитель, что позволяет ему отображать, несмотря на то, что за пределами.list.

Вы можете проверить это, изменивoverflow собственность наhidden на.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 элемент обрезает оставшиеся ящики.

Надеюсь, это поможет вам понять, что происходит в дополнение к решению проблемы для вас. Ура!

0

больше кода, чем вы хотели, но вы можете просто суммировать ширину элементов внутри 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/

2

el.scrollWidth.

Похожие вопросы