Question

我有一个.cards的水平flexbox组，每个.card都有一个最小宽度和一个百分比裕度。

我想使用.cards得到.width()的总宽度。

设计约束：

.card边距必须为%。
.cards必须使用flexbox。
可以有任意数量的卡，保证金为%。
如果卡片过多，则应水平滚动-无需换行。

我尝试过什么：

使用.height()，我已经正确计算了以像素为单位的总高度（包括％边距）。
在px中设置边距可以准确计算宽度。

基于上述情况，当子代有%边距时，甚至可以计算总宽度吗？

我还想知道css中是否有任何导致宽度计算不正确的“错误” ？？

笔在这里：https://codepen.io/matthewelsom/pen/xyxBLr

var cardWidth = $('.cards').width();
var cardHeight = $('.cards').height();

$('.width').text('H=' + cardHeight + ' W=' + cardWidth);

$('.container').css("height", cardHeight);

.container {
  position: relative;
  background: pink;
  padding: 3rem 0;
  overflow: scroll;
}
.cards {
  display: flex;
  width: auto;
  position: absolute;
  background: antiquewhite;
}
.card {
  width: 250px;
  min-height: 190px;
  background: white;
  margin: 1%;
}
.card:nth-child(1) {
  margin-left: 5%;
  margin-right: 5%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="cards">
    <div class="card width">250</div>
    <div class="card">500</div>
    <div class="card">750</div>
    <div class="card">1000</div>
    <div class="card">1250</div>
    <div class="card">1500</div>
    <div class="card">1750</div>
    <div class="card">2000</div>
    <div class="card">2250</div>
    <div class="card">.cards width should be 2500 + margins</div>
  </div>
</div>

当子元素具有％的边距时，获取flexbox容器的总宽度

0 个答案: