文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Flexbox和CSS伪类

问Flexbox和CSS伪类
EN

Stack Overflow用户
提问于 2018-03-31 03:33:50
回答 1查看 138关注 0票数 1

我试着重新创建这个支架，也就是右边屏幕的左边。我使用flex来反转列，但是使用:before和:after伪类的紫色行有问题。

有什么想法吗？

Codepen链路

​

代码语言：javascript
复制
*,
*::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;
}
代码语言：javascript
复制
<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
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-03-31 04:55:40

这是因为左右手的代码没有对称性，side...No需要切换:before和:after for both...just，使用left和right值以及border-color

​

代码语言：javascript
复制
*,
*::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;
}
代码语言：javascript
复制
<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>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/49583962

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档