Create a list layout with flex

chand pb
chand pb used Ask the Experts™
on
How do I create a list of items in flexbox.. Each entry in the list will have the attached image format

Thanks  Capture.JPG
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You would start with an unordered list where each list item can contain column div's for the left (blue) and right(white).
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>test</title>
   </head>
   <body>
      <ul>
         <li>
            <div>
               <div class="date_number">12
                  <span class="day_name">Fri</span>
               </div>
               <div class="time">11:00am - 4:00pm</div>
               <div class="line">Restaurant</div>
               <div class="line">Bartender</div>
            </div>
         </li>
      </ul>
   </body>
</html>

Open in new window

From here, it will be a matter of updating your css to style with background and font colors as well as to specify the font to use.

Author

Commented:
Thanks Scott.

I got the HTML part .it is SCSS that I need help with...

Basically , how do you get the div  to be side by side and how to get the image to alway be on the right


Thanks
Developer & EE Moderator
Fellow 2018
Most Valuable Expert 2013
Commented:
https://jsbin.com/kacuwateyi/edit?html,output
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>test</title>
     <style>
       .date_number{float:left;}
       .day_name{display:block;}
      
       .time{float:left;}
       .line{display:block;}
       
       /* STYLE IT */
       ul{ 
         list-style-type: none;
       }
       
       .date_number{
         background-color:blue;
         color:white;
         padding:10px;
         height:50px;
       }
       
       .time{
         background-color:white;
         padding:10px;
         height:50px;
       }
    </style>
   </head>
   <body>
      <ul>
         <li>
            <div>
               <div class="date_number">12
                  <span class="day_name">Fri</span>
               </div>
               <div class="time">11:00am - 4:00pm
                 <span class="line">Restaurant</span>
                 <span class="line">Bartender</span>
               </div>    
             </div>
         </li>
      </ul>
   </body>
</html>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial