我正在努力学习flexBox,但我很难理解这个概念.我想创建一个电子邮件列表,其中每个项目都是一个flexBox容器(见下文).
规则：
>标签是可选的,但如果显示,则直接显示在名称旁边.
>日期始终存在,宽度变化
>该人的姓名填补剩余空间.如果它变大,它就会被截断.
>名称和标签之间的空格始终为5px
>邮件主题显示在新行上,也会被截断
到目前为止我的尝试：https://jsbin.com/sepobipiwa/edit?html,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;
}
<!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>
解决方法
所以我对你的代码做了这个：
>通过添加flex-wrap使你的flexBox包裹：包裹到li
>通过告诉它在行中获取完整的可用宽度,将主题强制为下一行：给予它flex-basis：100％
>添加margin-left：auto将日期放在最右端.
>要完成它,您可以将这些样式添加到名称和主题以获取ellispsis woking：
white-space: nowrap; overflow: hidden;
>还添加了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;
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;
}
<!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,consectetur adipiscing elit.</div> </li> </ul> </div> </body> </html>
建议：
您应该编辑标记并为包含名称,标记和日期的第一行创建一个包装器,这是一个更好的设计(您可以删除不整齐的最大宽度：上面使用的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%;
}
<!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,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>
