html - 如何正确定位和制作截面

Question

再会！我请你帮忙。你能告诉我在这种情况下如何组成最好的细胞吗？我是这样用的，但那里有相同的寄宿生。（我附上了代码）在这种情况下，一切都变得更加困难，而且我对如何做到这一点没有太多想法。而第二个问题是如何正确定位这些块，这样以后媒体查询就不是很难了。[在此处输入图像描述

.benefits__wrapper {
  text-align: center;
  padding-top: 3.9881vw;
  padding-bottom: 15px; }

.benefits__heading {
  margin-bottom: 6.84524vw; }

.benefits__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center; }
  @media screen and (max-width: 759px) {
    .benefits__items {
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; } }

@media screen and (max-width: 759px) {
  .benefits__item {
    width: 40%;
    margin: 20px 0; } }

@media screen and (max-width: 459px) {
  .benefits__item {
    width: 100%; } }

.item {
  text-align: center;
  margin-right: 40px; }
  @media screen and (max-width: 459px) {
    .item {
      margin-right: 0; } }
  .item:last-child {
    margin-right: 0; }
  .item__title {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font: 1.25rem/1 "PFEncoreSansPro-Regular";
    color: #868686;
    margin-bottom: 34px; }
  .item__info {
    font: 0.9375rem/1.125rem "PFEncoreSansPro-Thin";
    color: #adadad;
    margin-bottom: 3.03571vw; }

.hexagon {
  margin: 0 auto 54px; }
  .hexagon__icon {
    fill: #fff;
    -webkit-transition: background-color .35s;
    transition: background-color .35s; }

.hexagon,
.hexagon__item_inner {
  position: relative;
  width: 91px;
  height: 52px;
  background-color: #fe8682;
  -webkit-transition: background-color .35s;
  transition: background-color .35s; }

.hexagon:before,
.hexagon:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fe8682;
  -webkit-transition: background-color .35s;
  transition: background-color .35s; }

.hexagon:before,
.hexagon__item_inner:before {
  -webkit-transform: rotate(120deg);
          transform: rotate(120deg); }

.hexagon:after,
.hexagon__item_inner:after {
  -webkit-transform: rotate(60deg);
          transform: rotate(60deg); }

.hexagon__item_inner {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: scale(0.9);
          transform: scale(0.9);
  background-color: #fc635e;
  z-index: 1; }

.hexagon__item_inner:before,
.hexagon__item_inner:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: background-color .35s;
  transition: background-color .35s;
  background-color: #fc635e; }

.hexagon__content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 1; }

.hexagon:hover,
.hexagon:hover:before,
.hexagon:hover:after {
  background-color: #fc635e; }

.hexagon:hover .hexagon__item_inner,
.hexagon:hover .hexagon__item_inner:before,
.hexagon:hover .hexagon__item_inner:after {
  background-color: #fff; }

.hexagon:hover .hexagon__icon {
  fill: #fc635e; }

<section class="benefits">
      <div class="benefits__wrapper container">
        <div class="benefits__heading">
          <div class="heading_usual">
            <div class="heading__title uppercase">What can
              <div class="span heading_active">you receive?</div>
            </div>
            <div class="heading__subtitle">
              Daisy is sagittis sem nibh id elit.   Duis sed odio sit amet nibh vulputate cursus a 
                sit amet mauris. Morbi accumsan ipsum
            </div>
          </div>
        </div>
        <div class="benefits__items">
          <article class="benefits__item item">
            <div class="hexagon">
              <div class="hexagon__item_inner"></div>
              <div class="hexagon__content">
                <svg class="hexagon__icon icon_xl">
                  <use xlink:href="svg/sprite.svg#rocket"></use>
                </svg>
              </div>
            </div>
            <div class="item__title uppercase">Clents</div>
            <div class="item__info">
              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel velit auctor aliquet. Aenean</div>
          </article>
          <article class="benefits__item item">
            <div class="hexagon">
              <div class="hexagon__item_inner"></div>
              <div class="hexagon__content">
                <svg class="hexagon__icon icon_xl">
                  <use xlink:href="svg/sprite.svg#web-design"></use>
                </svg>
              </div>
            </div>
            <div class="item__title uppercase">branding</div>
            <div class="item__info">
              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel velit auctor aliquet. Aenean</div>
          </article>
          <article class="benefits__item item">
            <div class="hexagon">
              <div class="hexagon__item_inner"></div>
              <div class="hexagon__content">
                <svg class="hexagon__icon icon_xl">
                  <use xlink:href="svg/sprite.svg#diagram"></use>
                </svg>
              </div>
            </div>
            <div class="item__title uppercase">marketing</div>
            <div class="item__info">
              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel velit auctor aliquet. Aenean</div>
          </article>
          <article class="benefits__item item">
            <div class="hexagon">
              <div class="hexagon__item_inner"></div>
              <div class="hexagon__content">
                <svg class="hexagon__icon icon_xl">
                  <use xlink:href="svg/sprite.svg#speaker"></use>
                </svg>
              </div>
            </div>
            <div class="item__title uppercase">adv.</div>
            <div class="item__info">
              This is Photoshop's version  of Lorem Ipsum.   Proin gravida nibh vel velit auctor aliquet. Aenean</div>
          </article>
        </div>

] 3

标签： htmlcsssvg