的Flex股利不縮水

Question

我想縮小cta-content文本到第二行，如果兩個按鈕存在於cta-wrapper

我想如果只有一個按鈕來在單條線顯示cta-content。

我試圖給寬度爲cta-content，但它縮小了div。請給我建議，如果這可以在不使用Javascript &進行更改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一個還可以防止按鍵永不斷線和下面的文字自理定位

.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; 
 
}

<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 2

可以使用flex-basis規則定義單個彈性項目的默認大小。

flex-basis

的柔性基礎CSS屬性指定柔性基礎這是一個柔性物品的初始主尺寸。...

所以在你的片段，例如，你可以定位cta-module的第一個孩子，然後設置flex-basis爲.cta-content元素。

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

這將是一個非常靜態的解決方案，雖然，這隻會影響到cta-module容器中的第一個孩子，這是不相關的按鈕的cta-wrapper元素中的量。

另一解決方案是使用JavaScript來收集包含多個<button>元件，然後設置flex-basis每個cta-content元件上的所有cta-wrapper元素。

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)

.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}

<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>