All geek questions in one place

Flexbox list with remaining width, ellipsis and some content on a new line

I am trying to learn flexbox , but I am trying to understand the concept. I want to create a list of emails where each item is a flexbox container (see below).

example

Rules:

  • The tag is optional, but if it is displayed, it is displayed directly next to the name.
  • There is always a date, width variations
  • The name of the person fills the remaining space. If it gets big, it truncates.
  • The space between the name and the tag is always 5px
  • The subject of the message is displayed on a new line and is also truncated.

My attempt: 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; } 
 <!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>
+6
source share
2 answers

So, I did this with your code:

  • Created flexbox by adding flex-wrap: wrap to li

  • Forced subject to the next line, telling it to get the full available width in the line, specifying its flex-basis: 100%

  • Add margin-left: auto to put date at the far right.

  • To finish it, you can add these styles to name and subject to get an ellispsis stun:

      white-space: nowrap; overflow: hidden;

  • Also added max-width: 50% to name to configure the first line.

See the demo below:

 .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,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>

Sentence

You should edit your markup and create a wrapper for the first line that contains name , tag and date , which is the best design (you can remove the sloppy max-width: 50% used above) - see the demo below:

 .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,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>
+5
source

Just an extension on kukkuz a great answer.

Here we get the same results, but without changing the layout. (Some of them are more complicated, but sometimes you can change your markup).

You really need to get rid of flex-wrap and install all the first 3 elements in one line. One option is to set an object element outside of a flexible container, setting it absolute. The remnants of the modifications are intended only to restore the broken layout.

 .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 0px 40px 0px; margin: 0px 20px; border-bottom: 1px solid #ccc; position: relative; } .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%; position: absolute; bottom: 20px; max-width: 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,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>
+2
source

Source: https://habr.com/ru/post/1013803/

More articles:


All Articles