flexbox inline

by poselab

HTML

<div class="youtube_videos">
    <ul>
        <li>
            <img src="https://i1.ytimg.com/vi/5jQ2RoJIjhA/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=5jQ2RoJIjhA">Tip108 - Two Attribute Managers at the same time</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/WwZtymPZ1lA/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=WwZtymPZ1lA">Tip107 - Sculpting Part 7</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/K8vFBOAIWME/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=K8vFBOAIWME">Tip106 - Sculpting Part 6</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/CZGmbzeMIow/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=CZGmbzeMIow">Tip105 - Sculpting Brush Size</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/RB9PyZy3zAs/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=RB9PyZy3zAs">Tip 104 - Sculpting Part 4</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/FoVsbezg2XY/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=FoVsbezg2XY">Tip103 - Sculpting Part 3</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/UDZ0PF88GOA/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=UDZ0PF88GOA">Tip102 - Sculpting Part 2</a>
            </h3>
        </li>
        <li>
            <img src="https://i1.ytimg.com/vi/l5WEU1F07SI/default.jpg">
            <h3><a href="https://www.youtube.com/watch?v=l5WEU1F07SI">Tip101 - Sculpting - Part1</a>
            </h3>
        </li>
    </ul>
    <div class="pagination">
        <div></div>
        <div><a data-next="CAgQAA" class="next-button">Next</a>
        </div>
    </div>
</div>

CSS

.youtube_videos ul{
	list-style: none;
	margin: 0;
    
	display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    
	justify-content: flex-start;
    
	align-content: flex-start;
    
	align-items: flex-start;
    
    
	padding: 0;
	background: yellow;
}

.youtube_videos li{
width: 120px;
margin: 0 10px
;
}

.pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-content: flex-start;
    align-items: flex-start;
    background: #00FFA3;
}