flex 布局父元素padding-right与子元素最后一个元素 margin-right 失效有人遇到过么

发布于
2017-06-19

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
   .wrapper {
     width: 200px;
     border: 1px solid red;
     display: flex;
     overflow: auto;
     box-sizing: border-box;
     padding: 20px;
   }
   .wrapper div {
     width: 80px;
     border: 1px solid red;
     flex-grow: 0;
     margin-right: 20px;
   }
 </style>
</head>
<body>
<div class="wrapper">
 <div>123</div>
 <div>123</div>
 <div>123</div>
 <div>123</div>
 <div>123</div>
 <div>123</div>
 <div>123</div>
 <div>123</div>
</div>
</body>
</html>

最后一个元素效果：
图片描述

css flex

阅读 12.5k

4 个回答

得票最新

自己去想

221

发布于
2018-06-14

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
    *{
      margin:0;
      padding:0;
    }

    .container{
      display: flex;
      overflow: auto;
      border:1px solid red;
    }

   .wrapper {
     display: flex;
     overflow: visible;
     box-sizing: border-box;
     padding: 20px;
   }
   .wrapper div {
     width: 50px;
     border: 1px solid red;
     flex: 1;
     margin-right: 20px;
   }
 </style>
</head>
<body>
<div class="container">
  <div class="wrapper">
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
  </div>
</div>
</body>
</html>

treeandgrass

1.3k32243

发布于
2017-06-19

首先来说并不是失效，而是你设置的宽度太短，导致对齐的时候没有按照正常方式对齐，如图

解决方式：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
    *{
      margin:0;
      padding:0;
    }

    .container{
      width:200px;
      overflow-x: auto;
      border:1px solid red;
    }

   .wrapper {
     width: 600px;
     display: flex;
     overflow: auto;
     box-sizing: border-box;
     padding: 20px;
   }
   .wrapper div {
     width: 50px;
     border: 1px solid red;
     flex-grow: 0;
     margin-right: 20px;
   }
 </style>
</head>
<body>
<div class="container">
  <div class="wrapper">
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
   <div>123</div>
  </div>
</div>
</body>
</html>

如图：