FlexBox - 指定一個特定的子div來控制寬度？

使用flexbox時，默認情況下，孩子根據最寬的元素調整大小。FlexBox - 指定一個特定的子div來控制寬度？

是否有某種方法來定義特定的孩子將控制寬度，即使它更小？選擇器可能？

Codepen：https://codepen.io/dsomekh/pen/rwEYYE

代碼：

.center { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.first { 
 
    border: 1px solid red; 
 
    margin-bottom: 0.5vw; 
 
} 
 

 
.second { 
 
    border: 1px solid red; 
 
} 
 

 
.wrapper { 
 
    font-family: Calibri; 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<html> 
 

 
<div class="center"> 
 
    <div class="wrapper"> 
 
    <div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div> 
 
    <div class="second">This div is smaller.Can it control the width?</div> 
 
    </div> 
 
</div> 
 

 
</html>

來源

2017-07-19 David Somekh

只是爲了澄清，你要小的孩子有自己的寬度，只有那樣大的內容或你想較小的孩子做出更大的DIV小於其內容？ –

你的意思是你想讓所有的div都不會比自然最窄的div寬嗎？ – ADyson

我想要一個特定的div來控制其他元素的寬度。如果它更大，它們會變得更大。如果它變小，其他變得更小。 –

這裏是重要的CSS規則要知道：

flex: {number} {number} {number};

第三個數字是flex-item（寬度，如果flex項目在一行中）的默認大小。默認情況下，它是auto，這意味着flex-item的默認大小由其內容決定。

如果沿着主軸有空間（同樣，如果這個彈性項目在一行中，則寬度），第一和第二數字分別與其他彈性項目相比可以成比例地增長或縮小多少。

所以，你不能設置柔性項的默認大小是相對於同級的內在尺寸 - 即這是決定由它的內容 - 但你可以設置一個柔性項的默認大小（並且它是兄弟項目）都是相同的，並讓它們成長或縮小。

我發現自己經常做以下幾點：

flex: 1 0 0

關於Flex項目造成兄弟姐妹全部是相同的大小。

所有彈性項目都以默認大小0開始，並且它們均等增長 - 第一個數字對所有彈性項目都是相同的（這裏是一個，但它可以是任意正數因爲每個兄弟姐妹都是一樣的） - 因爲他們需要。

最佳Flexbox的學習各地是在這裏：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

編輯

如果你知道，在前進，這項目將是本質上更大，你很可能通過該項目設置爲flex: 0 0 auto做並讓所有其他彈性項目的增長從flex: 1 0 0，但我有一種感覺，你不知道哪一個更大。

.wrapper { display: flex; } 
 
.wrapper>div { border: 1px solid #000; } 
 
.first { flex: 1 0 0; } 
 
.second { flex: 0 1 auto; }

<div class="center"> 
 
    <div class="wrapper"> 
 
    <div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div> 
 
    <div class="second">This div is smaller.Can it control the width?</div> 
 
    </div> 
 
</div>

來源

2017-07-19 12:52:39 Adam

FlexBox - 指定一個特定的子div來控制寬度？

回答

相關問題