flexbox

1熱度

1回答

我有兩列。在我的左欄中我有一個p標籤。這個p標籤有很多文字，並且在我的專欄之外非常廣泛。當我刪除我的p標記列布局看起來很好。我試過在p標籤上設置max-width，但是這不是很好的迴應。我希望p標記是col div的100％寬度。我希望文字的寬度達到100％並很好地包裹。 .wrapper { display: flex; flex: 1 0 auto;

0熱度

1回答

CSS Flex - 我有一個項目列表可以需要使他們水平滾動與溢出隱藏

我有一個div內的3項。這個容器需要100％的小部件和水平滾動條。所以就像一個旋轉木馬。 .wrapper { display: flex; flex: 1 1 0; overflow-x: scroll; overflow-y: hidden; } .content { display: flex;

0熱度

1回答

CSS的Flex寬度上的文本

的線我不太清楚，如果這是可能的CSS，但沒有找到那個方向什麼，但我會搏一搏：在（Flex的） - 容器我想要多個（2-3）框/列的文本。每一列都是它自己的文章，它有自己的標題，所以它不是一個文本繼續到下一列。但是，我希望所述列的寬度是靈活的，以便沒有列浪費空白空間直到結束。如果一列有空行，它會嘗試減小寬度以爲自己創建更多換行符並填充該空白，而其他框獲得更多寬度以減少文本行數。在任何情況下，所

0熱度

2回答

Bootstrap 4垂直對齊中心無法在柔性佈局上工作

使用Bootstrap 4，我有一個響應式佈局，包含3列，（應該）在不同的屏幕尺寸上更改順序，寬度和水平對齊。它所有的工作，只是在屏幕大小< 768px的IMGS的水平居中對齊不正常工作。這裏是我的代碼： .icon-xl-large { width: 80px; } .w-400px { max-width: 400px; } <link hr

-2熱度

2回答

想不通什麼是錯的代碼

我試圖做到這一點的設計... 但結果不出我所料，我不是真的清楚如何與柔性嘗試此屬性和bootstrap，但它們不是我的強項。請解釋，解決方案背後的步驟或鏈接/視頻到可以的網站。 .Charlie{ border: solid 1px #333; text-align:center; display: flex; height: 786px; width: 550px;

0熱度

1回答

爲什麼是柔性壓低頁腳未能

我試圖使用Flex箱技術，https://css-tricks.com/couple-takes-sticky-footer/來響應下推頁腳在我的網頁http://apple.mdsc1.com/test/ 我用： - <style> #wrapper {flex: 1 0 auto;} body, html {height: 100%} body { d

1熱度

1回答

將圖像的比率保存在高度調整大小的柔性容器中

我在flex容器中的圖像出現問題。當容器/窗口高度減小/調整大小時，我希望它保持比例。 Sample fiddle html, body { height: 100%; } .wrapper { display: flex; width: 100%; height: 60%; border: 1px so

1熱度

1回答

如何根據柔性佈局

獲得MD分壓器我知道MD-分頻器是MD-名單，但我想它在柔性佈局例如： <div layout="row" layout-wrap> <div flex="100"></div> <md-divider></md-divider> <div flex="100"><div> </div> 應該得到horizantal兩個div之間的另一種情況 <div lay

0熱度

3回答

最簡單的方法來選擇Flex容器的所有元素？

什麼是最簡單的方法來選擇flexbox容器的所有子元素，並給他們所有相同的餘量，例如？例子： <div class="flexboxcontainer"> <h1>Headline</h1> <p>Some Text</p> <div>Some more text</div> <p class="smalltext">Some small text</p> </div>

0熱度

1回答

Flexbox的欄佈局響應與列重新排序沒有固定的高度

我試圖用Flexbox的做到這一點=> 桌面： | | | block 1 | | block 2 | | | | block 3 | 移動： block 1 block 2 block 3 我來到這個 .cont { display: flex; flex-direction: column; flew-wrap: wrap-reverse;