CSS显示flex属性中的html元素正在拉伸

Question

我目前在一个网站上工作，使一个流程图部分。在这个图表中，我用border-radius:100%;在数字中添加了width:42px和height:42px，但它在每个列表中都在伸展。我要把它改成圆圈的形式。我不知道为什么当我在CSS属性display:flex上签名时会发生这种情况。有没有人能帮我解决这个问题？

​

​

代码如下：

​

:root {
  --main-color-one: #858485;
  --secondary-color: #2e2e2e;
  --heading-color: #222222;
  --paragraph-color: #858485;
  --hover-color: #1674b1;
  --bg-color: #fafafa;
  --bg-color-two: #fff;
  --bg-color-three: #29547E;
  --heading-font: "Karla", sans-serif;
  --body-font: "Montserrat", sans-serif;
  --tasti-font: "Katibeh", cursive;
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.flowchart {
  width: 80%;
}

.flowchart ul {
  display: flex;
  flex-flow: column;
}

.flowchart li {
  align-self: flex-start;
  border: 1px solid #d9d9d9;
  width: 35%;
  position: relative;
  display: flex;
  align-items: center;
}

.flowchart li>div {
  padding: 20px;
  background-color: var(--bg-color-two);
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
}

.flowchart li>div .w-num {
  background-color: var(--heading-color);
  width: 70px;
  height: 40px;
  border-radius: 100%;
  display: block;
  margin-right: 10px;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  line-height: 40px;
  font-weight: bold;
}

.flowchart li:first-child .flowchart-divider {
  width: 50%;
}

.flowchart li:nth-child(even) {
  align-self: flex-end;
}

.flowchart li:nth-child(even):after {
  right: 100%;
}

.flowchart-divider {
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: var(--hover-color);
  left: 100%;
}

.flowchart-divider .w-divider-r {
  position: relative;
  display: block;
}

.flowchart-divider .w-divider-r:after {
  left: 100%;
  width: 1px;
  bottom: -1px;
  background-color: var(--hover-color);
  content: '';
  position: absolute;
  height: 65px;
  display: block;
}

.flowchart li:nth-child(even) .flowchart-divider {
  right: 100%;
  left: inherit;
}

.flowchart li:nth-child(even) .flowchart-divider .w-divider-r:after {
  right: 100%;
  left: inherit;
}

<div class="container">
  <div class="row justify-content-center">
    <div class="flowchart">
      <ul class="list-unstyled">
        <li>
          <div><span class="w-num">1</span>Lorem Ipsum is simply dummy text of the</div><span class="workflow-divider"><span class="w-divider-r"></span></span>
        </li>
        <li>
          <div><span class="w-num">2</span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</div><span class="workflow-divider"><span class="w-divider-r"></span></span>
        </li>
      </ul>
    </div>
  </div>
</div>

​

Answer 1

两件事: 1)边框半径: 100%；只有当你将with和height设置为相同的值时，才能正确地工作(就像让你得到一个完美的圆圈)。您当前定义了width: 70px和height 40px。这需要是40/40或70/70。

2)其次，因为你使用flex，你的宽度会被忽略，你的div会缩小到8px。为了解决这个问题，您需要将您不想收缩的div的flex-don设置为0。

更正后的CSS：

.flowchart li>div .w-num {
    background-color: var(--heading-color);
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: block;
    margin-right: 10px;
    text-align: center;
    color: #fff;
    vertical-align: middle;
    line-height: 40px;
    font-weight: bold;
    flex-shrink: 0;
}

Answer 2

问题是您需要将flex项包装在容器中，这样它就不会对孩子产生影响。我只是把你的数字泡泡包装成span

​

:root {
  --main-color-one: #858485;
  --secondary-color: #2e2e2e;
  --heading-color: #222222;
  --paragraph-color: #858485;
  --hover-color: #1674b1;
  --bg-color: #fafafa;
  --bg-color-two: #fff;
  --bg-color-three: #29547E;
  --heading-font: "Karla", sans-serif;
  --body-font: "Montserrat", sans-serif;
  --tasti-font: "Katibeh", cursive;
  --d: 700ms;
  --e: cubic-bezier(0.19, 1, 0.22, 1);
}

.flowchart {
  width: 80%;
}

.flowchart ul {
  display: flex;
  flex-flow: column;
}

.flowchart li {
  align-self: flex-start;
  border: 1px solid #d9d9d9;
  width: 35%;
  position: relative;
  display: flex;
  align-items: center;
}

.flowchart li>div {
  padding: 20px;
  background-color: var(--bg-color-two);
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
}

.flowchart li>div .w-num {
  background-color: var(--heading-color);
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: block;
  margin-right: 10px;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  line-height: 40px;
  font-weight: bold;
}

.flowchart li:first-child .flowchart-divider {
  width: 50%;
}

.flowchart li:nth-child(even) {
  align-self: flex-end;
}

.flowchart li:nth-child(even):after {
  right: 100%;
}

.flowchart-divider {
  position: absolute;
  height: 1px;
  width: 100%;
  background-color: var(--hover-color);
  left: 100%;
}

.flowchart-divider .w-divider-r {
  position: relative;
  display: block;
}

.flowchart-divider .w-divider-r:after {
  left: 100%;
  width: 1px;
  bottom: -1px;
  background-color: var(--hover-color);
  content: '';
  position: absolute;
  height: 65px;
  display: block;
}

.flowchart li:nth-child(even) .flowchart-divider {
  right: 100%;
  left: inherit;
}

.flowchart li:nth-child(even) .flowchart-divider .w-divider-r:after {
  right: 100%;
  left: inherit;
}

<div class="container">
  <div class="row justify-content-center">
    <div class="flowchart">
      <ul class="list-unstyled">
        <li>
          <div><span><span class="w-num">1</span></span><span>Lorem Ipsum is simply dummy text of the</span></div><span class="workflow-divider"><span class="w-divider-r"></span></span>
        </li>
        <li>
          <div><span><span class="w-num">2</span></span><span>Lorem Ipsum is simply dummy text of the printing and typesetting industry</span></div><span class="workflow-divider"><span class="w-divider-r"></span></span>
        </li>
      </ul>
    </div>
  </div>
</div>

​