Flexbox和CSS伪类

Question

我正在尝试重新创建右侧屏幕左侧的支架。我使用flex命令来反转列，但使用:before和:after伪类来解决紫色线问题。

有什么想法吗？

Codepen Link

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.half {
  display: flex;
  justify-content: space-between;
}

.region-1,
.region-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 44%;
}

.round {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.round:first-child .match::before {
  display: none;
}

.round:first-child .match__content::before {
  display: none;
}

.round:last-child .match::after {
  display: none;
}

.match {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px 10px;
  padding: 10px 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
}

.match__content {
  width: 100%;
  height: 20px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
}


/* LEFT SIDE */

.region-2 .round-1 {
  order: 10;
}

.region-2 .round-2 {
  order: 9;
}

.region-2 .round-3 {
  order: 8;
}

.region-2 .round-4 {
  order: 7;
}

.region-2 .round-5 {
  order: 6;
}

.region-1 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-left: 2px solid purple;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-1 .match:nth-child(odd)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-1 .match:nth-child(even)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  bottom: 50%;
}

.region-1 .match__content::before {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: -10px;
}


/* RIGHT SIDE */

.region-2 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-right: 2px solid purple;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-2 .match:nth-child(even)::before {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-2 .match:nth-child(odd)::before {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-2 .match__content::after {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: -10px;
}

<div class="half">
  <div class='region-1'>
    <div class='round round-1'>
      <div class='match'>
        <div class='match__content'>1 Test</div>
      </div>
      <div class='match'>
        <div class='match__content'>16 Test</div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>

    </div>
    <div class='round round-2'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
    <div class='round round-3'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
    <div class='round round-4'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
    <div class='round round-5'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
  </div>
  <div class='region-2'>
    <div class='round round-1'>
      <div class='match'>
        <div class='match__content'>1 Test</div>
      </div>
      <div class='match'>
        <div class='match__content'>16 Test</div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>

    </div>
    <div class='round round-2'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
    <div class='round round-3'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
    <div class='round round-4'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
    <div class='round round-5'>
      <div class='match'>
        <div class='match__content'></div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是因为你的代码中左右两侧都没有对称性......无需为两者切换:before和:after ...只需使用{ {1}}和left值以及right

＆＃13;

＆＃13;

border-color

＆＃13;

*,
*::after,
*::before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.half {
  display: flex;
  justify-content: space-between;
}

.region-1,
.region-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 44%;
}

.round {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.match {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0px 10px;
  padding: 10px 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  position: relative;
}

.match__content {
  width: 100%;
  height: 20px;
  position: relative;
  background: rgba(0, 0, 0, 0.1);
}

.round:first-child .match::before {
  display: none;
}

.round:first-child .match__content::before {
  display: none;
}

.round:last-child .match::after {
  display: none;
}


/* LEFT SIDE */

.region-2 .round-1 {
  order: 10;
}

.region-2 .round-2 {
  order: 9;
}

.region-2 .round-3 {
  order: 8;
}

.region-2 .round-4 {
  order: 7;
}

.region-2 .round-5 {
  order: 6;
}

.region-1 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-left: 2px solid purple;
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-1 .match:nth-child(odd)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  top: 50%;
}

.region-1 .match:nth-child(even)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-right-color: purple;
  height: 50%;
  position: absolute;
  right: -10px;
  width: 10px;
  bottom: 50%;
}

.region-1 .match__content::before {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  left: -10px;
}


/* RIGHT SIDE */

.region-2 .match::before {
  content: '';
  display: block;
  height: 30px;
  border-left: 2px solid purple;
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -15px;
  margin-left: -2px;
}

.region-2 .match:nth-child(even)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-bottom-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  left: -10px;
  width: 10px;
  bottom: 50%;
  margin-left: -2px;
}

.region-2 .match:nth-child(odd)::after {
  content: '';
  display: block;
  border: 2px solid transparent;
  border-top-color: purple;
  border-left-color: purple;
  height: 50%;
  position: absolute;
  left: -10px;
  width: 10px;
  top: 50%;
  margin-left: -2px;
}

.region-2 .match__content::before {
  content: '';
  display: block;
  width: 10px;
  border-bottom: 2px solid purple;
  margin-left: -2px;
  position: absolute;
  top: 50%;
  right: -10px;
}

＆＃13;

＆＃13;

＆＃13;