Flex 项目的内部边框有间隙答案

【问题标题】：Flex items inner borders with gapsFlex 项目的内部边框有间隙
【发布时间】：2018-11-02 14:11:18
【问题描述】：

我正在尝试创建带有间隙的内部边界。我尝试使用:after 伪元素创建边框，但:after 元素不可见。

.view {
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px -5px 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: yellow;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.content:after{
   content: '';
   background: black;
   position: absolute;
   bottom: 5px; 
   width: 2px;
   height: 20px;
   right: -10px;    
}

.head {
  text-align: center;
}

<div class="view">
<div class="container">
   <div class="content">
      <div class="val">0</div>
      <div class="head">Total balance</div>
   </div>
   <div class="content">
      <div class="val">0</div>
      <div class="head">Available balance</div>
   </div>
   <div class="content">
      <div class="val">0</div>
      <div class="head">Orders</div>
   </div>
   <div class="content">
      <div class="val">500</div>
      <div class="head">Wallet balance</div>
   </div>
   <div class="content">
      <button class="val" type="button">Send</button>
   </div>
</div>
</div>

我正在努力实现这个结果：

【问题讨论】：

标签： html css flexbox pseudo-element

【解决方案1】：

可能有更好的方法来做到这一点。但这是在不更改 HTML 布局的情况下完成的。

.view {
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -5px 0 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: yellow;
  padding: 20px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  position: relative;
}

.content:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  right: -5px;
  background: yellow;
  z-index: 1111;
  border: 4px solid yellow;
}

.content:after {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  background: yellow;
  z-index: 1111;
  border: 4px solid yellow;
}

.head {
  text-align: center;
}

<div class="view">
  <div class="container">
    <div class="content">
      <div class="val">0</div>
      <div class="head">Total balance</div>
    </div>
    <div class="content">
      <div class="val">0</div>
      <div class="head">Available balance</div>
    </div>
    <div class="content">
      <div class="val">0</div>
      <div class="head">Orders</div>
    </div>
    <div class="content">
      <div class="val">500</div>
      <div class="head">Wallet balance</div>
    </div>
    <div class="content">
      <button class="val" type="button">Send</button>
    </div>
  </div>
</div>

【讨论】：

感谢回答，但是底部有横边框，中间横边框没有间隙screenshot
我稍微更新了你的 sn-p，它工作得很好jsfiddle。谢谢！

【解决方案2】：

希望对你有帮助

<!DOCTYPE html>
<html>
  <head>
    <style>

    .center {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .view {
        background-color: yellow;
    }

    .topContainer {
        display: grid;
        grid-template-columns: repeat(3, 3fr);
        border-bottom: 1px solid #000;
    }

    .bottomContainer {
        display: grid;
        grid-template-columns: repeat(2, 3fr);
    }

    .content {
        padding: 25px;
        text-align: center;
        border-left: 1px solid #000;
    }

    .topContainer .content:first-child {
        border: none;
    }

    .bottomContainer .content:first-child {
        border: none;
    }

    </style>
  </head>
  <body>

    <div class="view">
      <div class="topContainer">
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Total balance</div>
            </div>
         </div>
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Available balance</div>
            </div>
         </div>
         <div class="content center">
            <div>
              <div class="val">0</div>
              <div class="head">Orders</div>
            </div>
         </div>
      </div>
      <div class="bottomContainer">
         <div class="content center">
            <div>
              <div class="val">500</div>
              <div class="head">Wallet balance</div>
            </div>
         </div>
         <div class="content center">
            <button class="val" type="button">Send</button>
         </div>
      </div>
    </div>

  </body>
</html>

Result

【讨论】：

我正在尝试创建带有间隙的边框。请检查我的问题中的屏幕截图。
只需创建一个带边框的 innerContainer 类。并向父容器添加填充。