flexbox

0熱度

1回答

我有一個佈局在CSS中工作，但我不明白它爲什麼它的工作原理。 CSS專家，請闡明這裏發生的事情。我的目標是有一個這樣的佈局：的突出特點是：固定高度的頁眉和頁腳在窗口的頂部和底部佔據頁眉和頁腳之間全部空間的內容區域內容區域有其自己的滾動條（即i t不會將頁腳向下推過屏幕底部）。我做到了這一點，使用CSS彈性框和內部div的組合，0％的高度。違揹我的期望，0％高度的div伸展到全部可用高度

2熱度

1回答

Flex的增長預期不工作（柔性物品沒有我期望的寬度）

JSFiddle 我試圖使用flex CSS屬性，以適應一組元素成一個整潔的小盒子。它看起來完全如何我想在IE10中，但Chrome顯示它非常不同。我主要有：集裝箱選擇框（flex:5），應約寬足以顯示D，而不是更廣泛。文本輸入（flex:10），應占用一半多一點的寬度包含確認按鈕（flex:6），應足夠寬以包含它的文本，但沒有更多。它工作正常在IE，但在鉻前兩個元素佔用每個寬度的50

1熱度

1回答

<body>和div與顯示之間的奇怪間距：box

這是非常奇怪的，沒有像邊距或填充，但我仍然有一個空間和第一個div是100％的高度和寬度，與顯示：框屬性。測試在Firefox 20 </head> <body> <div id="outer"> <div id="blueDiv"> </div> </div> </body> </html> http://jsfiddle.net/ByWwz/

4熱度

1回答

Safari中的Flexbox：增長和縮小

我正在嘗試製作跨瀏覽器的Flexbox佈局，以顯示彼此並排放置的卡片。當所有卡片有足夠的空間時，它們應該左對齊或右對齊（由「左」和「右」類別確定），但當沒有足夠空間時縮小。縮小時，將鼠標懸停在卡上會使其縮小，從而可以查看更多內容。這麼多談論這個，live demo here如果你願意。 CSS： img{ width:90px; position: absolute; }

0熱度

1回答

Flexbox顯示器是否會更改邊距寬度？

當我使用flexbox（當前版本或顯示器：flex;）時，我的利潤似乎增加了一倍，我無法弄清楚原因。頁面各節之間的所有其他頁邊距顯示爲10px，因爲它們已設置，但用於flexbox內容的邊距顯示爲大約兩倍。我已經嘗試將包裝div（#output）設置爲margin：0px;和填充：0px;但這沒有任何作用。這是一個flexbox「功能」？或者是我的CSS的邊距/填充設置有問題嗎？的HTML： <

1熱度

1回答

用於Firefox中水平框模型的CSS

我只需要創建一個帶有少數幾個框（div）的「標題」，並且我希望水平顯示它們，就像工具欄一樣。所以這裏有一個基本的CSS代碼，做工精細的Chrome，但不是在Firefox， header{ margin-bottom:1px; display: -webkit-box; display: -moz-box; box-orient:inline-axis;

0熱度

1回答

Opera box-sizing不適用於flex的textarea

我在Opera中發現了一個bug：box-sizing在flex顯示模式下對textarea不起作用。 b { display: flex; flex-direction: row; } textarea { float: right; width: 50%; height: 50px; padding: 15px; bo

0熱度

1回答

-webkit-box-flex：1;與顯示器一起使用時不起作用：-webkit-flex;

我使用新的display: -webkit-flex;語法來定義'flexboxes'，但我無法獲得-webkit-box-flex: 1;的效果，所以元素會佔用剩餘的空間。當我使用display: box;，舊的語法，它工作正常（例如http://flexiejs.com/playground/）。我可以使用建議，鉻支持新標準（http://flexiejs.com/playground/）。

2熱度

1回答

應用方框屬性後，子元素忽略父母的寬度

相當簡單的問題，但我似乎無法找到解決這個簡單問題的方法。我有一個我需要的元素列表，因爲特定的原因需要顛倒，這隻需要用CSS來完成，因爲後端會生成一個普通列表。箱子方向屬性完美地實現了這一點，只有在應用它之後，子元素完全嵌入父寬度並且彼此相鄰顯示，從父箱溢出。我該如何解決這個問題？ <div> <p>Cat</p> <p>Dog</p> <p>Horse</p>

2熱度

2回答

填充剩餘的水平空間（或最大寬度），敷在最小寬度

#fit和#wrap示出了兩個不同的行爲，我想爲一個元件根據情況。元素應該像#fit如果有空間，但應該像#wrap如果沒有足夠的空間。 http://jsfiddle.net/benstenson/dN8VJ/ <div id="print"> Printable </div> <div id="fit"> Looks good on same line </div>