如何通过带有 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 来实现这种设计 [关闭]的主要内容,如果未能解决你的问题,请参考以下文章

带有TextInput和按钮的Flex警报

flex 属性与按钮高度混淆?

css弹性布局是啥

ORM 或其他东西可以有效地处理带有 order 列的 SQL 表

Flex 布局教程:语法篇

有关如何通过 flex 属性居中对齐的问题