Flexbox 和 CSS 伪类

【问题标题】：Flexbox and CSS pseudo classesFlexbox 和 CSS 伪类
【发布时间】：2018-03-31 03:33:50
【问题描述】：

我正在尝试在右侧重新创建这个位于屏幕左侧的支架。我使用 flex order 来反转列，但在使用 :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>

【问题讨论】：

    标签： html css flexbox pseudo-element


    【解决方案1】：

    这是因为您的代码左右两侧都没有对称性...无需为两者切换:before 和:after...只需使用left 和right值和border-color

    *,
*::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;
}
    <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>

    【讨论】：

      猜你喜欢
      • 2023-03-22
      • 1970-01-01
      • 1970-01-01
      • 2021-07-10
      • 1970-01-01
      • 1970-01-01
      • 2010-10-25
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode