<div class="boxes">
    <div class="box top"></div>
    <div class="box right"></div>
    <div class="box left"></div>
    <div class="box bottom"></div>
</div>

# 弹性盒

描述：

创建3 个元素来保存.boxes。
top：拿着顶盒
center：抱着左和右框
bottom：持底框

换句话说：

• 每个.box嵌套（孩子）在一个div具有class所述的方向。

例子：<div>BOX</div>。

• 左右嵌套在center.

HTML：

<!-- top box -->
<div>
    <div></div>
</div>

<!-- left, right boxes -->
<div>
    <div>
        <div></div>
    </div>
    <div>
        <div></div>
    </div>
</div>

<!-- bottom box -->
<div>
    <div></div>
</div>

将它们全部包装在一个div.wrapper：

<div>
     <!-- top box -->
     <div></div>
     <!-- left, right boxes -->
     <div></div>
     <!-- bottom box -->
     <div></div>
</div>

以下会风格的线3层的元件和将它们设置为它们的位置，.top将居中（左右）和顶部，.center将被居中从所有方向，.bottom居中（左右），并且在底部，通过显示.wrapper children水平（flex-direction: column;) 并将 ( align-items: center;) 与 ( space-between) 它们居中，使用flex.

检查： Flexbox 完整指南

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

然后我们对.center元素做一些类似的事情，通过显示它们left和right彼此相邻，居中和space-between它们。（flex-direction声明中没有属性，因为默认值在一行中（垂直））

.wrapper .center {
    width: 100%; /* Don't delete, check notes */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

最后，使用负数， margin我们将 移到boxes边缘。

.top .box {
    margin-top: -40px;
}

.bottom .box {
    margin-bottom: -40px;
}

.center .left .box {
    margin-left: -40px;
}

.center .right .box {
    margin-right: -40px;
}

笔记：

的left和right 盒是（width: 80px），每个，这意味着margin应该是-40px（80/2 = 40），以在中心集合。

• left： margin-left: -40px
• right： margin-right: -40px

同为top和bottom，因为尺寸翻转。

• top： margin-top: -40px
• bottom： margin-bottom: -40px

这样，所有的boxes都将集中在边缘。

• 默认情况下，当用 显示时flexbox，parent( .center) 将采用width它的内容/孩子（适合）！这意味着，width: 40px * 2因为我们在那里有2 个盒子。现在为了确保该space-between值有效，我们应该.center通过样式化它width来“拉伸”元素（父元素），它100%允许boxes 拥有尽可能多的space-between，然后每个box都将在它的位置上。

.wrapper .center {
    width: 100%; /* Don't delete, check notes */
}

编码：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    width: 600px;
    height: 600px;
    border: 1px solid;
    margin: 50px auto;
}

.box {
    position: absolute;
    border: 1px solid;
    background-color: red;
}

.box.top, .box.bottom {
    width: 200px;
    height: 80px;
}

.box.left, .box.right {
    width: 80px;
    height: 200px;
} 

.box.top {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -40px;
}

.box.bottom {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -40px;
}

.box.left {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-left: -40px;
}

.box.right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin-right: -40px;
}

.content {
    padding: 40px; /* check notes */
}

编辑：

正如@anatolhiman 在评论中提到的：

但是负边距会产生一个问题，因为元素会左右溢出（尤其是在窄屏幕上）。

一个简单的解决方案：（两个例子都一样）

例如，将我们之前添加的HTML包装在另一个 中div，.container并使用 CSS 添加间距，或者padding或margin工作，取决于您的情况。

<div>
     <div>

     </div>
</div>

/* outside space */
.container {margin: 50px;}

/* Or */

/* inside space */
.container {padding: 50px;}