Flexbox列表,其中包含剩余宽度,省略号和新行上的一些内容

Question

Flexbox列表,其中包含剩余宽度,省略号和新行上的一些内容

我正在努力学习flexbox,但我很难理解这个概念.我想创建一个电子邮件列表,其中每个项目都是一个flexbox容器(见下文).

规则:

标签是可选的,但如果显示,则直接显示在名称旁边.
日期始终存在,宽度变化
该人的姓名填补剩余空间.如果它变大,它就会被截断.
名称和标签之间的空格始终为5px
邮件主题显示在新行上,也会被截断

到目前为止我的尝试:https://jsbin.com/sepobipiwa/edit？html,css,output

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

kuk*_*kuz 5

所以我对你的代码做了这个:

通过添加到你flexbox的包装flex-wrap: wrapli
subject通过告诉它通过给出它来获取行中的完整可用宽度,强制到下一行flex-basis: 100%
添加margin-left: auto到date最右端.
要完成它,您可以添加这些样式name并subject获取ellispsis woking:
```
  white-space: nowrap;
  overflow: hidden;
```
Run Code Online (Sandbox Code Playgroud)
还添加max-width: 50%到name调整第一行.

见下面的演示:

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 50%;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
}
.date {
  margin-left: auto;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="name">John Doe</div>
        <div class="date">14:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Marrie Antoinette</div>
        <div class="tag">Concept</div>
        <div class="date">16:01</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">tag</div>
        <div class="date">18:50</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="name">Someone with a long name</div>
        <div class="tag">concept</div>
        <div class="date">yesterday</div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

建议:

您应该编辑您的标记,并创建一个包装为包含在第一行name,tag并且date这是一个更好的设计(可以删除不整洁 max-width: 50%以上使用) -见下面的演示:

.container {
  width: 350px;
  background-color: #FFF;
}
html {
  font-family: 'Nunito Sans', sans-serif;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: baseline;
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.name {
  font-size: 16px;
  font-weight: bold;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.tag {
  margin-left: 5px;
  font-size: 10px;
  font-weight: bold;
  background-color: #EFEFEF;
  padding: 3px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
.subject {
  font-size: 15px;
  font-weight: 300;
  color: #888;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  flex-basis: 100%;
}
.date {
  margin-left: auto;
}
.header {
  display: flex;
  width: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800" rel="stylesheet">
  <title>JS Bin</title>
</head>

<body>
  <div class="container">
    <ul>
      <li>
        <div class="header">
          <div class="name">John Doe</div>
          <div class="date">14:50</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Marrie Antoinette</div>
          <div class="tag">Concept</div>
          <div class="date">16:01</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Someone with a long name</div>
          <div class="tag">tag</div>
          <div class="date">18:50</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
      <li>
        <div class="header">
          <div class="name">Someone with a long name</div>
          <div class="tag">concept</div>
          <div class="date">yesterday</div>
        </div>
        <div class="subject">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
      </li>
    </ul>
  </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，4 月前
查看次数：	287 次
最近记录：	8 年，8 月前