儿童用品之间的弹性框“概述”

Question

我目前正在处理个人项目并使用flex-box。我在弹性框中创建了一些嵌套的弹性框，我在我的子项之间得到了某种轮廓。我尝试用边框颜色，盒子阴影去除它们......但是它们一直在闪耀，我不能帮助自己，所以希望你们有一个解决方案。

http://www.directupload.net/file/d/3998/7ldg6zr7_jpg.htm

这是它的样子。我想摆脱这些微小的界限。

mfg Cabrinha

SCSS

@import "compass/css3";
@import "compass/reset";

// Color-Variables

$lightgrey: #BDC0C2;
$grey: #919699;
$darkgrey: #4F565C;
$blue: #4145B5;
$lightblue: #00BFFF;
$purple: #6A2FA0;
$mediumpurple: #4682B4;
$royalblue: #4169E1;
$white: #FFFFFF;

$cube_size: 150px;

// General

body {
  overflow-x: hidden;
}

// Top Content

#top_content {
  background-color: $mediumpurple;
  width: 100vw;
  height: 100vh;
  margin: 0 0 100px;
  #logo {
    font-family: 'Sarpanch', sans-serif;
    text-align: center;
    padding-top: 40vh;
      h1,h2 {
        margin: 20px;
      }
      h1 {
        font-size: 6em;
        color: $white;
        text-shadow: 1px 1px 0 0 black;
      }
      h2 {
        font-size: 2em;
        color: $darkgrey;
      }
  }
}


// Main Content

#main_content {
  background-color: $white;
}

// Navigation Cube

#main_nav_wrapper {
  @include display-flex;
  @include flex-wrap(wrap);
  @include rotate(45deg);
  width: $cube_size * 6;
  height: $cube_size * 4;
  margin: -330px auto;
}

.flex_container {
  @include display-flex;
  @include flex-wrap(wrap);
  @include align-items(stretch);
  width: $cube_size * 2;
  height: $cube_size * 2;
}

.navigation_cube {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  border: 5px solid white;
  background-color: $mediumpurple;
  p {
    @include rotate(-45deg);
    position: relative;
    top: 65px;
    font-size: 1.15em;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    color: $white;
  }
}

#portrait_cube {
  box-sizing: border-box;
  @include display-flex(flex);
  overflow: hidden;
  width: $cube_size * 2;
  height: $cube_size * 2;
  background-color: white;
  @include order(5);
  @include justify-content(center);
  @include box-shadow(inset -1px 0px 16px 1px rgba(0,0,0,1));
  position: relative;
  z-index: 100;
  #img_container {
    position: relative;
    z-index: -1;
    right: -50px;
    top: -50px;
    width: $cube_size * 3;
    height: $cube_size * 3;
    /*
    background-image: url("../images/navi_img.JPG");
    background-position: center center;
    background-color: $purple;
    */
    @include rotate(-45deg);
    @include background-size(cover);
  }
}

.navigation_cube:hover,
.navigation_cube:focus,
.navigation_cube:active 
{
  cursor: pointer;
  p {
    border-left: 3px solid white;
    border-right: 3px solid white;
    font-size: 1.3em;
  }
}

.cube {
  @include display-flex(flex);
  width: $cube_size * 2;
  height: $cube_size * 2;
  background-color: transparent;
  @include align-items(stretch);
}

#cube_one {
  @include justify-content(flex-start);
  @include order(4);
}

#cube_two {
  @include justify-content(flex-end);
  @include flex-wrap(wrap-reverse);
  @include order(2);
}

#cube_three {
  @include justify-content(flex-start);
  @include order(6);
}

#cube_four {
  @include justify-content(flex-end);
  @include flex-wrap(wrap-reverse);
  @include order(3);
}

#referenz {
}

#beruf {
  @include order(1);
}

#ausland {
}

#auszeichnung {
}

#sprache {
  @include order(3);
}

#bildung {
  @include order(2);
}

#engagement {
}

#ausland {
  @include order(1);
}

#empty {
  background-color: transparent;
  border: none;
  @include box-shadow(none);
}

// Hidden Content (Toggle over Nav)

#hidden_content {
  margin: -100px auto 125px;
  position: relative;
  top: -14px;
  z-index: 100;
  width: $cube_size * 3.5;
  height: $cube_size * 3.5;
  background-color: white;
  @include rotate(-45deg);
  @include box-shadow(inset -1px 0px 16px 1px rgba(0,0,0,1));
  color: black;
  /*
  h3 {
    text-align: center;
    font-size: 1.4em;
    color: $blue;
    padding: 20px;
  }
  #cv_container {
    margin: auto;
  }
  #cv_left {
    width: 45%;
    float: left;
    padding: 0 2.5% 20px 2.5%;
    margin-top: 40px;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid black;
  }
  #cv_title {
    font-size: 1.1em;
    color: $blue;
  }
  #cv_description {
    width: 45%;
    float: right;
    padding: 0 2.5% 20px 2.5%;
    margin-top: 40px;
  }
  #cv_text:before {
    content: "";
    display: table;
    clear: both;
  }
  h5 {
    padding-top: 40px;
    text-align: center;
    color: $blue;
    font-size: 1.15em;
  }
  h4 {
    text-align: center;
    color: $darkgrey;
    margin-top: -20px;
  }
  #hidden_container {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
  }
  */
}

// Footer
#footer_cube {
  margin: 305px 50% -100px;
  position: relative;
  left: -150px;
  @include rotate(45deg);
  height: $cube_size * 2;
  width: $cube_size * 2;
  background-color: white;
  @include box-shadow(inset -1px 0px 16px 1px rgba(0,0,0,1));
  div {
    width: 50%;
    height: 50%;
    background-color: transparent;
    @include box-shadow(none);
  }
  div:hover {
    cursor: pointer;
    p {
    border-left: 3px solid $darkgrey;
    border-right: 3px solid $darkgrey;
    }
    }
  p {
    @include rotate(-45deg);
    position: relative;
    top: 65px;
    font-size: 1.2em;
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: center;
    color: $darkgrey;
  }
}

#showcase {
  position: absolute;
  z-index: 200;
  top: 95vh;
  left: 50%;
  margin-left: -300px;
  width: $cube_size * 4;
  height: $cube_size * 4;
  background-color: transparent;
  color: black;
  h3 {
    text-align: center;
    font-size: 2em;
    color: $blue;
    padding: 20px;
  }
  #cv_container {
    margin: auto;
  }
  #cv_left {
    width: 45%;
    float: left;
    padding: 0 2.5% 20px 2.5%;
    margin-top: 40px;
    text-align: center;
    box-sizing: border-box;
    border-right: 3px solid $lightgrey;
  }
  #cv_title {
    font-size: 1.1em;
    color: $blue;
    text-align: right;
  }
  #cv_date {
    text-align: right;
    margin-top: 20px;
    padding-right: 0;
    font-size: 0.9em;
    color: $grey;
  }
  #cv_description {
    text-align: left;
    width: 53%;
    float: right;
    margin-top: 40px;
    margin-left: -50px;
    padding: 20px 0;
    color: $grey;
    font-size: 1em;

  }
  #cv_text:before {
    content: "";
    display: table;
    clear: both;
  }
  h5 {
    padding-top: 40px;
    text-align: center;
    color: $darkgrey;
    font-size: 1.3em;
  }
  h4 {
    text-align: center;
    color: $darkgrey;
    margin-top: -20px;
    font-size: 1.3em;
  }
  #cv_text h5 {
    color: $darkgrey;
  }
  #hidden_container {
    position: relative;
    top: 50%;
    transform: translateY(-50%)
  }
}
#footer_bar {
  height: 200px;
  width: 100%;
  background-color: $darkgrey;
  margin-bottom: 0;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link href='http://fonts.googleapis.com/css?family=Caudex:700|Petit+Formal+Script|Sarpanch:400,700,600|Unna' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <section id="top_content">
      <div id="logo">
        <h1>Marc J. Wiemann</h1>
        <h2>Business Master of Desaster</h2>
      </div>
    <section id="showcase">
      <%include hiddencontent.ejs %>
    </section>
    </section>
    <section id="hidden_content">
    </section>
    <section id="main_content">
      <div id="main_nav_wrapper">
        <div id="empty" class="navigation_cube cube">
        </div>
        <div id="portrait_cube">
          <div id="img_container"></div>
        </div>
        <div id="cube_one" class="flex_container cube">
          <div class="navigation_cube" id="auszeichnung">
            <p>Auszeichnung</p>
          </div>
          <div class="navigation_cube" id="referenz">
            <p>Referenz</p>
          </div>
        </div>
        <div id="cube_two" class="flex_container cube">
          <div class="navigation_cube" id="beruf">
            <p>Beruf</p>
          </div>
        </div>
        <div id="cube_three" class="flex_container cube">
          <div class="navigation_cube" id="engagement">
            <p>Engagement</p>
          </div>
        </div>
        <div id="cube_four" class="flex_container cube">
          <div class="navigation_cube" id="ausland">
            <p>Ausland</p>
          </div>
          <div class="navigation_cube" id="sprache">
            <p>Sprache</p>
          </div>
          <div class="navigation_cube" id="bildung">
            <p>Bildung</p>
          </div>
        </div>
      </div>
    </section>
    <footer id="footer_cube" class="flex_container">
      <div id="footer_cube_top" class="navigation_cube">
        <p>E-Mail</p>
      </div>
      <div id="footer_cube_right" class="navigation_cube">
        <p>LinkedIn</p>
      </div>
      <div id="footer_cube_left" class="navigation_cube">
        <p>Twitter</p>
      </div>
      <div id="footer_cube_bottom" class="navigation_cube">
        <p>Facebook</p>
      </div>
    </footer>
    <footer id="footer_bar">
      <div id="contact">
      </div>
      <div id="design">
      </div>
    </footer>
  </body>
</html>

这是我目前的WIP代码，非常麻烦...