如何在不創建2列的情況下製作此網格?Flexbox網格1col 1row 3boxes
-2
A
回答
0
是這樣的嗎?
* {
box-sizing: border-box;
}
.container {
width: 100%;
}
.left {
width: 66.66%;
height: 400px;
float: left;
background-color: blue;
}
.right {
width: 33.33%;
height: 200px;
float: right;
background-color: red;
border: thin solid black;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
</div>
0
這裏是我的柔性盒,只要你想..
.vert_flex {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid black;
}
.hor_flex {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border: 1px solid black;
}
<div class="hor_flex">
<div style="flex : 2; height: 300px">width 66.6%</div>
<div class="vert_flex" style="flex : 1; height: 300px">
<div class="hor_flex" style="flex : 1">width 33.3%</div>
<div class="hor_flex" style="flex : 1">width 33.3%</div>
</div>
</div>
0
的Flex讓生活輕鬆超..
.container {
display:flex;
}
.left {
flex:2;
background-color: #c1c1c1;
}
.container_right {display: flex;
flex: 1;
flex-direction:column}
.right {
flex:1;
background-color: #456456;
}
和HTML ..
<div class="container">
<div class="left">aaaaaaaaaaaa</div>
<div class="container_right">
<div class="right">bbbbbbbbbbbb</div>
<div class="right">cccccccccccc</div>
</div>
</div>
你一定要想到的一切作爲一個容器..該容器中的一切都可以被彎曲..
使用Flex,你需要避免與PX定義什麼如果可能的話。與
%的單位堅持
VW/VH [R REM/EM
相關問題
- 1. Flexbox的小網格
- 2. Safari/Chrome - Flexbox網格
- 3. 嵌套的Flexbox網格
- 4. Flexbox網格 - 等高線列
- 5. Flexbox拼貼網格佈局
- 6. 使用flexbox實現特定網格
- 7. 響應式Flexbox圖像網格
- 8. Flexbox網格在IE10/11中未對齊
- 9. 使用FlexBox創建響應式網格
- 10. 用flexbox創建雙列網格
- 11. Flexbox的網格:細胞不會增長
- 12. 格被推下來Flexbox的
- 13. Flexbox網格最後一行項目之間的錯誤邊距
- 14. 我創建的Flexbox網格是當頁面太小時打破
- 15. 將天溝添加到自舉flexbox網格
- 16. 如何按比例縮放此flexbox瓷磚網格
- 17. 是否可以創建一個4x4 flexbox網格?
- 18. Flexbox兩列網格不能正常工作
- 19. 使flexbox網格在手機上有一個水平滾動條
- 20. 嵌套網格/ Flexbox標題向下推送內容
- 21. 調整大小屏幕尺寸的flexbox網格
- 22. CSS Flexbox(網格):Chrome中的子對象高度爲100%
- 23. 啓用Flexbox網格使用引導4阿爾法CDN
- 24. 如何使用Flexbox將4幅圖像分割爲2x2網格?
- 25. 添加裝載機陣營,Flexbox的網格進Webpack2配置
- 26. 具有多寬度色譜柱的Flexbox網格
- 27. Edge和Firefox中Flexbox網格上的摺疊邊界
- 28. 具有邊緣排水溝的Flexbox網格系統
- 29. 使用Flexbox將創建一個DIV元素的頂部網格
- 30. 使用CSS flexbox或網格佈局的響應式圖片庫
告訴我們,你試過到目前爲止的代碼。 – aavrug