Question

如果cta-content

中有两个按钮，我想将cta-wrapper文字缩小到第二行

如果只有一个按钮，我想在一行显示cta-content。

我试图给cta-content宽度，但它缩小了div。如果没有Javascript＆amp;更改HTML模型（可以更改HTML，但两者都应该相同）

.cta-module {
  text-align: center;
}

.cta-module .cta-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}

.cta-module .cta-wrapper .cta-content p {
  margin: 0;
}

.cta-module .cta-wrapper .cta-button {
  margin-right: 1rem;
}

<div class="cta-module">
  <div class="bottom-divider standard-spacing">
    <div class="cta-title">
      <h2>Looking for Health EFPPOS Solutions?</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Our mobile EFTPOS facilities are convenient, portable and secure </p>
      </div>
      <div class="cta-button">
        <a class="button_primary" href="#">Apply</a>
      </div>
      <div class="cta-button">
        <a class="button_secondary" href="#">Learn more</a>
      </div>
    </div>
  </div>

  <div class="bottom-divider standard-spacing">
    <div class="cta-title">
      <h2>Looking for Health EFPPOS Solutions?</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Our mobile EFTPOS facilities are convenient, portable and secure </p>
      </div>
      <div class="cta-button">
        <a class="button_primary" href="#">Apply</a>
      </div>
    </div>
  </div>
</div>

Answer 1

要在有2个按钮时强制换行，可以使用nth-last-child()选择器，在这种情况下，将从末尾选择3：rd元素，这将是cta-content时的有2个按钮，当有1个按钮时没有按钮。

然后，通过简单地给它一个最大宽度，这比在1行中启用文本小，它会断线，但在更宽的屏幕上看起来可能不太好。

根据您的评论，通过注释flex-wrap: wrap，还可以阻止按钮永不断行并将自己定位在文本下方

＆＃13;

.cta-module {
  text-align: center;
}

.cta-module .cta-wrapper {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  /* flex-wrap: wrap;         comment this out will make buttons stay 
                              side-by-side with the text                   */
}

.cta-module .cta-wrapper .cta-content {
}

.cta-module .cta-wrapper > div:nth-last-child(3) {
  _flex: 1;
  max-width: 250px
}

.cta-module .cta-wrapper .cta-content p {
  margin: 0;
}

.cta-module .cta-wrapper .cta-button {
  width: 120px;
  margin-right: 1rem;
}

＆＃13;

<div class="cta-module">
  <div class="bottom-divider standard-spacing">
    <div class="cta-title">
      <h2>Looking for Health EFPPOS Solutions?</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Our mobile EFTPOS facilities are convenient, portable and secure </p>
      </div>
      <div class="cta-button">
        <a class="button_primary" href="#">Apply</a>
      </div>
      <div class="cta-button">
        <a class="button_secondary" href="#">Learn more</a>
      </div>
    </div>
  </div>

  <div class="bottom-divider standard-spacing">
    <div class="cta-title">
      <h2>Looking for Health EFPPOS Solutions?</h2>
    </div>
    <div class="cta-wrapper">
      <div class="cta-content">
        <p>Our mobile EFTPOS facilities are convenient, portable and secure </p>
      </div>
      <div class="cta-button">
        <a class="button_primary" href="#">Apply</a>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用flex-basis规则来定义单个弹性项的默认大小。

flex-basis

基于flex的CSS属性指定弹性基础，它是弹性项目的初始主要大小。 ...

因此，在您的代码段中，您可以定位cta-module的第一个孩子，然后为flex-basis元素设置.cta-content。

.cta-module > div:first-child .cta-content {
  flex-basis: 220px;
}

这将是一个非常静态的解决方案，它只会影响cta-module容器中的第一个子节点，并且与cta-wrapper元素中的按钮数量无关。

另一种解决方案是使用JavaScript收集包含多个cta-wrapper元素的所有<button>元素，然后在每个flex-basis元素上设置cta-content。

＆＃13;

const wrappers = document.querySelectorAll( '.cta-wrapper' );

const findWrapperWithMoreThanOneButton = 
wrapper => wrapper.querySelectorAll( '.cta-button' ).length > 1

const setFlexBasis =
wrapper => {
  wrapper.querySelector( '.cta-content' )
  .style
  .flexBasis = '220px'
}

Array.from( wrappers )
.filter( findWrapperWithMoreThanOneButton )
.forEach( setFlexBasis )

＆＃13;

.cta-module{text-align:center}.cta-module .cta-wrapper{display:flex;justify-content:center;margin:0 auto;align-items:center;flex-wrap:wrap}.cta-module>div:first-child .cta-content{flex-basis:220px}.cta-module .cta-wrapper .cta-content p{margin:0;text-align:left}.cta-module .cta-wrapper .cta-button{margin-right:1rem}

＆＃13;

<div class="cta-module"> <div class="bottom-divider standard-spacing"> <div class="cta-title"> <h2>Looking for Health EFPPOS Solutions?</h2> </div><div class="cta-wrapper"> <div class="cta-content"> <p>Our mobile EFTPOS facilities are convenient, portable and secure </p></div><div class="cta-button"> <a class="button_primary" href="#">Apply</a> </div><div class="cta-button"> <a class="button_secondary" href="#">Learn more</a> </div></div></div><div class="bottom-divider standard-spacing"> <div class="cta-title"> <h2>Looking for Health EFPPOS Solutions?</h2> </div><div class="cta-wrapper"> <div class="cta-content"> <p>Our mobile EFTPOS facilities are convenient, portable and secure </p></div><div class="cta-button"> <a class="button_primary" href="#">Apply</a> </div></div></div></div>

＆＃13;

Flex Div没有缩小

2 个答案: