如何通过带有 flex 属性或其他东西的 html 和 css 来实现这种设计 [关闭]
Posted
技术标签:
【中文标题】如何通过带有 flex 属性或其他东西的 html 和 css 来实现这种设计 [关闭]【英文标题】：How to achieve this design by html and css with flex property or something else [closed] 【发布时间】：2021-08-15 12:18:51 【问题描述】：我想制作待办事项列表，并为每个任务添加 div。所以我有两个跨度标签和两个按钮，但我不知道如何实现这一点。我认为 flex 属性会有所帮助，我尝试过但无法实现
你能推荐任何关于 flex 属性的详细视频吗？
【问题讨论】：
到目前为止您尝试过什么，效果如何？ 蓝色 div，显示：flex；宽度：100%；第一跨宽：10%；第二跨宽：70%；按钮宽度：10%; 【参考方案1】：此代码可能对您有用。
nav
display: flex;
.box-1
background-color: green;
.box-2
background-color: red;
flex-grow: 1;
<nav>
<span class="box-1">Your Logo Text</span>
<span class="box-2"></span>
<button>Button 1</button>
<button>Button 2</button>
</nav>【讨论】：
【参考方案2】：https://jsfiddle.net/ws23hb46/
<div class="container">
<div>
xxx
</div>
<div class="foo">
aaaaaaaaaaaaaaaaaaaaaa
</div>
<div>
<button>
a
</button>
</div>
<div>
<button>
b
</button>
</div>
</div>
css:
.container
width: 100%;
display: flex; // direction is row by default
justify-content:space-between;
.container > div
padding:1em;
margin:1em;
background-color:grey;
.foo
flex:1 0 100%; // 1 = take the remaining space (same as flex-grow:1;)
【讨论】：
【参考方案3】：这是你的 btn 代码
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.div1
display: flex;
justify-content: space-between;
padding: 20px;
</style>
</head>
<body>
<div class="div1">
<div style="width:20%";>
<span>some text</span>
</div>
<div style="width:40%";>
<span>some larger text column</span>
</div>
<div>
<button type="button" class="btn btn-success">Button</button>
<button type="button"class="btn btn-danger">Button</button> </div>
</div>
</body>
</html>
【讨论】：
以上是关于如何通过带有 flex 属性或其他东西的 html 和 css 来实现这种设计 [关闭]的主要内容，如果未能解决你的问题，请参考以下文章