我有一个小工具来尝试多个 flexbox 参数。它可以向 flexbox 容器添加和删除 div 元素，然后使用 jQuery 显示这些添加元素的宽度。但是所测量的宽度与我在浏览器检查器中测量的不同。
使用“加”和“减”按钮可以添加元素。第一个元素的宽度应该是正确的，但后面的元素被错误地测量了。这里发生了什么？
function getWidth() {
// true: include margins
var v = parseFloat($(this).outerWidth(true)).toFixed(2);
var span = '<span>Width: ' + v + '</span>';
console.log(v);
$(this).html(span);
}
$(document).ready(function() {
// Initialize.
var items = 3;
var itemsDiv = '<div class="item">';
var HTML = '';
for (var i = 0; i < items; i++) {
HTML += itemsDiv + 'Item ' + i + '</div>';
}
$('.container').html(HTML)
var adjustment;
// Add / remove items
// Always keep at least one flex item.
$('input[name="build"]').click(function() {
adjustment = $(this).val();
if (adjustment == "plus") {
items += 1;
}
if (adjustment == "minus") {
if (items > 1) {
items -= 1;
}
}
HTML = '';
for (var i = 0; i < items; i++) {
HTML += itemsDiv + 'Item ' + i + '</div>';
}
$('.container').html(HTML);
$('.item').each(getWidth);
});
// Flex direction
// Select flex-direction radio buttons and get checked value.
$('input[name="flex-direction"]').click(function() {
var flexDirection = $('input[name="flex-direction"]:checked').val();
$('.container').css('flex-direction', flexDirection);
});
// Flex wrap
$('input[name="flex-wrap"]').click(function() {
var flexWrap = $('input[name="flex-wrap"]:checked').val();
$('.container').css('flex-wrap', flexWrap);
})
})body {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: row;
height: 200px;
width: 400px;
border: 1px solid grey;
margin: auto;
}
div.item {
padding: 0;
/* max-width: 80px; */
height: 100px;
margin: auto;
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./flexbox.css">
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script src="flexbox.js"></script>
</head>
<body>
<div class="base">
<input type="button" name="build" value="plus" id="plus">
<input type="button" name="build" value="minus" id="minus">
<div class="container"></div>
Flex Direction
<input type="radio" name="flex-direction" id="row" value="row" checked>
<label for="row">Row</label>
<input type="radio" name="flex-direction" id="column" value="column">
<label for="column">Column</label>
<input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
<label for="row-reverse">Row-Reverse</label>
<input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
<label for="column-reverse">Column-Reverse</label>
<br />
<input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
<label for="nowrap">No Wrap</label>
<input type="radio" name="flex-wrap" id="wrap" value="wrap">
<label for="wrap">Wrap</label>
<input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
<label for="wrap-reverse">Wrap-Reverse</label>
</div>
</body>
</html>
function getWidth()使用了传递布尔值为true的 jQuery 的outerWidth()。这意味着它将在计算时包括外边距。如果你移除布尔值，它就会正常运行。 - Paran0a