Flexbox List

In this example below you will see how to do a Flexbox List with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Charlie-93, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Charlie-93 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Flexbox List</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <body>

    <ul class="episode-list">
        <li class="episode-list-item">
            <span class="position">1</span>

            <h4 class="title">
                <a href="#">
                    Babel Setup
                </a>
            </h4>

            <span class="length">9:00</span>
        </li>

        <li class="episode-list-item is-current">
            <span class="position">2</span>

            <h4 class="title">
                <a href="#">
                    ES6 Compilation With Laravel Elixir
                </a>
            </h4>

            <span class="length">10:02</span>
        </li>

        <li class="episode-list-item">
            <span class="position">3</span>

            <h4 class="title">
                <a href="#">
                    Babel Setup
                </a>
            </h4>

            <span class="length">10:02</span>
        </li>

        <li class="episode-list-item">
            <span class="position">4</span>

            <h4 class="title">
                <a href="#">
                    Arrows
                </a>
            </h4>

            <span class="length">7:41</span>
        </li>
    </ul>

</body>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Charlie-93/flexbox-list-wodKqG */
*{
  margin: 0;
  padding: 0;
}

body, html{
  height:100%;
  font-family: 'Gill Sans';
  color:#1F618D;
  background-color:#D5D8DC;
}

body{
  display: flex;
  align-items: center;
  justify-content: center;
}

.episode-list{
  max-width:300px;
}

.episode-list-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:10px 0px;
  border-bottom: 1px dashed #1F618D;
}

.episode-list-item .title{
  padding-left: 30px;
  padding-right: 30px;
  margin-right: auto;
}

.episode-list-item .title a{
  text-decoration:none;
  color:#1F618D;
  font-weight:normal;
}


.episode-list-item .title a:hover{
  font-weight:bold;
}

.episode-list-item .position{
  color:#CA6F1E;
  font-weight:bold;
}

Comments