【前端】div设置的宽高与预览不同

<head>
<meta charset="utf-8">
<title>flex</title>
<style>
        .main{
            display:flex;
            border: 3px solid black;
            height: 500px;
            justify-content:space-between;
            align-items:center;
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item">1</div> 
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>

代码在此 可以看到设置的item宽高都是200px 但是实时预览的时候在dw里面是这样的

img

自动伸缩了，你允许换行设置下

flex会强制在一行显示，空间不够会压缩，
你可以设置强制换行，并且设置每一个item的flex-shrink为0（不会被压缩）

给.item加一个flex-shrink固定宽度

<head>
<meta charset="utf-8">
<title>flex</title>
<style>
        .main{
            display:flex;
            border: 3px solid black;
            height: 500px;
            justify-content:space-between;
            align-items:center;
            flex-wrap: wrap; //如果需要换行加上这个
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin-right: 10px;
            margin-bottom: 10px; 
            flex-shrink: 0;
        }
    </style>
</head>
 
<body>
    <div class="main">
        <div class="item">1</div> 
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>