我怎樣纔能有兩個固定寬度的柱子，中間有一個柔性柱子？

192

我試圖設置一個帶有三列的flexbox佈局，其中左列和右列具有固定寬度，並且中央列可彎曲以填充可用空間。我怎樣纔能有兩個固定寬度的柱子，中間有一個柔性柱子？

儘管爲列設置了尺寸，但隨着窗口縮小，它們似乎仍然縮小。

任何人都知道如何做到這一點？

我需要做的另一件事是根據用戶交互隱藏右列，在這種情況下，左列仍然保持其固定寬度，但中間列將填充剩餘空間。

#container { 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: stretch; 
 
    max-width: 1200px; 
 
} 
 

 
.column.left { 
 
    width: 230px; 
 
} 
 

 
.column.right { 
 
    width: 230px; 
 
    border-left: 1px solid #eee; 
 
} 
 

 
.column.center { 
 
    border-left: 1px solid #eee; 
 
}

<div id="container"> 
 
    <div class="column left"> 
 
     <p>Anxiety was a blog series that ran in the New York Times Opinion section from January 2012 to July 2013. It featured essays, fiction, and art by a wide range of contributors that explored anxiety from scientific, literary, and artistic perspectives.</p> 
 
    </div> 
 
    <div class="column center"> 
 
     <img src="http://i.imgur.com/60PVLis.png" width="100" height="100" alt=""> 
 
    </div> 
 
    <div class="column right"> 
 
     Balint Zsako 
 
     <br/> Someone’s Knocking at My Door 
 
     <br/> 01.12.13 
 
    </div> 
 
</div>

這裏有一個的jsfiddle：http://jsfiddle.net/zDd2g/185/

來源

2014-05-21 mheavers

https://jsfiddle.net/5aor2b0x/11/ – zloctb

403

而不是使用width（這是使用Flexbox的時候建議），你可以使用flex: 0 0 230px;這意味着：

0 =不增長（簡寫爲flex-grow）
0 =不收縮（簡寫flex-shrink）
230px =開始在230px（簡寫flex-basis）

這意味着：總是230px。

See fiddle，感謝@TylerH

哦，你不需要justify-content和align-items這裏。

來源

2014-05-21 22:17:00 Rudie

感謝 - 這是什麼0 0 230px代表什麼？如果右列被隱藏（這樣中間的列就會填充寬度 - 230px？ – mheavers

），那麼如何隱藏右列不應該是個問題，我在答案中解釋了「0 0 230px」的含義。 – Rudie

在當前的實現中（至少在Chrome中），還需要確保中間的列已經定義了'flex-grow'（比如說1）[更新的小提琴]（http://jsfiddle.net/zDd2g/74 /）。 – baseten

儘管爲列設置了尺寸，但當窗口縮小時，它們似乎仍然縮小。

柔性容器的初始設置是flex-shrink: 1。這就是爲什麼你的專欄正在縮小。

指定的寬度無關緊要（it could be width: 10000px），flex-shrink指定的寬度可以忽略，並且flex項目可以防止溢出容器。

我試圖建立與3列的Flexbox的，其中左右列有一個固定的寬度......

你需要禁用萎縮。這裏有一些選擇：

.left, .right { 
    width: 230px; 
    flex-shrink: 0; 
}

.left, .right { 
    flex-basis: 230px; 
    flex-shrink: 0; 
}

OR，所推薦的規範：

.left, .right { 
    flex: 0 0 230px; /* don't grow, don't shrink, stay fixed at 230px */ 
}

7.2. Components of Flexibility

鼓勵作者使用的控制靈活性flex舒爾暫緩而不是直接使用其長期屬性，因爲速記正確地重置任何未指定的組件以容納common uses。

更多細節在這裏：What are the differences between flex-basis and width?

另外一個事情，我需要做的是隱藏基於用戶互動的右列中，在這種情況下，左邊的列仍將保持其固定的寬度，但中心列將填補剩下的空間。

試試這個：

.center { flex: 1; }

這將允許它們被刪除時，中心柱消耗可用空間，包括其兄弟姐妹的空間。

Revised Fiddle

來源

2016-06-25 13:20:58

我怎樣纔能有兩個固定寬度的柱子，中間有一個柔性柱子？

回答

相關問題