CSS：與中心柱三柱向下移動時，它的太寬

Question

我試圖制定出一個頭。它的左右兩側有前後箭頭，中間有一個標題。當標題太寬時，我希望它出現在箭頭下面......不知道如何做到這一點！我試着用柔性盒子搞亂，但我對它並不是那麼好。

視覺：

   <  Title  > 

假作：

   <    > 
       Super Wide Title! 

這裏有一個codepen：http://codepen.io/wulftone/pen/KHkud

這甚至可能嗎？

Answer 1

你可以不用Flexbox的，如果你不介意重新排序的HTML和使用一些浮動。這裏是a codepen showing that。它使用這種結構：

HTML

<ul> 
    <li class="one">1</li> 
    <li class="three">3</li> 
    <li class="two">2</li> 
</ul> 

重點CSS

這僅僅是一個關鍵的CSS，讓你尋找具有中心下拉的功能。

ul { 
    text-align: center; 
} 

li { 
    display: inline-block; 
} 

.one { 
    float: left; 
} 

.three { 
    float: right; 
} 

Answer 2

那麼這結束了，比我想象中的簡單。

這裏是HTML（苗條）：

ul 
    li.one 1 
    li.three 3 
    li.two Super Long Title! 

而CSS（SASS）：

ul 
    padding: 0 
    margin: 0 
    color: white 
    font-weight: bold 
    font-size: 3em 
    text-align: center 
    list-style: none 

li 
    background: tomato 
    padding: 5px 
    width: 200px 
    height: 150px 
    line-height: 150px 

.three 
    float: right 

.one 
    float: left 

li.two 
    width: auto 
    display: inline-block 

http://codepen.io/wulftone/pen/GbLHI

好老浮子又化險爲夷！我希望這可以幫助別人。