<div class="d"> <div style="flex:0 0 auto">A</div> <div style="flex:1 0 auto">B</div> <div style="flex:0 0 auto">C</div> </div> <div class="d"> <div style="flex:1 0 auto">A</div> <div style="flex:3 0 auto">B</div> <div style="flex:5 0 auto">C</div> <div style="flex:7 0 auto">D</div> <div style="flex:9 0 auto">E</div> <div style="flex:11 0 auto">F</div> <div style="flex:13 0 auto">G</div> </div> <style> .d { display: flex;text-align: center;} .d > div { background: #f00; margin: 2px; width: 2em; } </style>
A
B
C
A
B
C
D
E
F
G
<div style="display:flex;flex-direction:column; width:100%;height:100%;gap:.25em"> <div style="background:black;height:3em">a</div> <div style="display:flex;flex-grow:1;gap:.25em"> <div style="background:black;width:3em">a</div> <div style="flex-grow:1;background:red;">a</div> <div style="background:black;width:3em">a</div> </div> <div style="background:black;height:3em">a</div> </div>
a
a
a
a
a
<meta charset="utf-8"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet"> <div style="display:flex;align-items:center;background:#eee;padding:.5em;"> <div style="flex:1"> <div style="font-size:0.8em">xinmeti.co</div> <div style="font-size:1.2em">新媒體內容與設計課程</div> <div style="font-size:0.8em">輔仁大學新聞傳播學系</div> </div> <div style="border:1px solid;border-radius:.25em;padding:.25em">立刻註冊</div> </div> <div style="display:flex;justify-content:space-between;text-align:center;"> <div class="btn"> <i class="ri-thumb-up-line"></i><span>讚</span> </div> <div class="btn"> <i class="ri-discuss-line"></i>留言 </div> <div class="btn"> <i class="ri-share-forward-line"></i>分享 </div> <div class="btn" style="flex:0"> <i class="ri-user-line"></i> <i class="ri-arrow-down-s-fill"></i> </div> </div>
xinmeti.co
新媒體內容與設計課程
輔仁大學新聞傳播學系
立刻註冊
讚
留言
分享
新媒體內容技術與設計

New Media Techniques and Design

重設登入階段SVG Background animated by Loading.io