Alternative

Amazon

Article

Writing

Art

AI

Angular

Photoshop

Premiere

Animal Crossing

Blog

Story

Android

Android Studio

Davinci Resolve

CSS

Clipchamp

ChatGPT

Crypto

DALL-E

Discord

Davinci Resolve

Davinci Resolve 18

Dream Studio

Express

Filmora

Flutter

PC Games

Git

GPT

GPT3

GPT4

GTA

GTA 6

Ghost Together

HTML

iOS

iMovie

Illustrator

JavaScript

Mac

Mongo

Midjourney

Minecraft

Node.js

NBA 2k24

OSX

PHP

Palworld

Python

Playground AI

Roblox

React

Recipe (Cooking)

React Native

Semicolon.dev

Starfield PC Game

Snapchat

Steam

Stable Diffusion

SVG

Threads

Text To Image (AI)

VSCode

Vim

Web Development

Windows

WebGL

Css Tutorials

----

CSS Flex Train Station Challenge

Please share on social media or blogs! I spent a long time making this Flexbox challenge 🙂

Click To Copy Link!

(Help spread the word about this article)

CSS Flex Train Station Challenge 1

Learn CSS Flex by playing this CSS Flexbox Train Station game!

Park your flex train at provided ghost train station. Each train car must perfectly match position of the ghost train. You can accomplish this by changing flex properties and values in source code window below.

Details matter. Pay close attention to direction of each car in every challenge.

How To Play. To pass this challenge align your train with the ghost train by changing flex properties. They will be applied to the parent container to align flex elements represented by train cars. Click Park Button to test your code when you're ready.

Flex Challenge 1 - Align To Center

class = "flex no-select"

style = "height: 300px; overflow: hidden; position: relative; justify-content: flex-start">

Get your flex train wagons parked at shown location to complete the challenge and go to next level.

Solution Hint (Click to unfold)

Hint: All you have to do is add 2 new properties justify-content and align-items to parent container and assign each a value! But which ones and why? Not sure? Head over to our CSS Flex Definitive Guide (it will teach you everything you need to know to pass this challenge) and then come back here.

Flex Container Code

Park

Fun fact. The wheels inside each flex element are also flex elements.

CSS Flex Train Station Challenge 2

Learn CSS Flex by playing this CSS Flexbox Train Station game!

Park your flex train at provided ghost train station. Each train car must perfectly match position of the ghost train. You can accomplish this by changing flex properties and values in source code window below.

Details matter. Pay close attention to direction of each car in every challenge.

How To Play. To pass this challenge align your train with the ghost train by changing flex properties. They will be applied to the parent container to align flex elements represented by train cars. Click Park Button to test your code when you're ready.

Flex Challenge 2 - Align To End

class = "flex no-select"

style = "height: 300px; overflow: hidden; position: relative; justify-content: space-evenly">

Get your flex train wagons parked at shown location to complete the challenge and go to next level.

Solution Hint (Click to unfold)

Hint: All you have to do is add 2 new properties justify-content and align-items to parent container and assign each a value! But which ones and why? Not sure? Head over to our CSS Flex Definitive Guide (it will teach you everything you need to know to pass this challenge) and then come back here.

Flex Container Code

display: flex;
<div id = "ea"></div></section>

</section>

<div class = "brightest"
               style = "margin-top: 16px; margin-bottom: 16px;">21.8K members</div>

<div onclick = "window.Community.clickJoinButton('Ghost Together')"
                 style = "font-size: 22px;
                          text-align: center;
                          line-height: 24px;
                          padding-top: 10px;
                          padding-bottom: 10px;
                          margin-bottom: 16px;
                          background: white;
                          color: #444;"
                 class = "rel button community-signup-button"><span style = "z-index: 1000000">Join This Conversation!</span>
                 
                 <div style = "position: absolute;
                 bottom: -17px;
                 left: 23px;
                 width: 30px;
                 width: 30px;
                 height: 30px;
                 transform: scaleX(0.5) rotate(45deg);
                 background: white;">

</div>

</div>
    </div>
</div>
                <div class = "communityPosts">
  <div class = "f v h" style = "margin-top: 16px; color: var(--hl-slightly-brighter-text);">
    What people are saying in this community:
  </div>
  <div id = "community-feed" class = "f v h" style = "margin-top: 20px">
    <div id = "commf" class = "fw"></div>
  </div>
</div></section>
            <section id = "dmic-1" class = "dm-info-container border-bottom none">
                <div id = "dm-info-header" data-rendered='false'></div>
            </section>
            <section id = "dmic-2" class = "dm-info-container">
                <div id = "dm-info"></div>
                
            </section>
        <section>

</section>

</section>

</main>

<a class = "f c v h stealth" href = "https://semicolon.dev">
            <div id = "writer-prefooter" class = "f v h c ppp">
                <div class = "write-for-us">Write For Us</div>
                <div style = "height: 10px"></div>
                <div><b>Sign Up Now  -  It's Free!</b></div>
            </div></a>
       <div id = "ask"
            
            style = "max-width: 990px; margin: auto;">

<h4 style = "font-size: 21.5px; font-weight: 600;">CSS Flex Train Station Challenge</h4>
  
            <div class = "pp"><h4 style = "font-size: 21.5px; font-weight: 600;">Comments (2) <span style = "color:orangered">New!</span> <span style = "color: gray">(You can now post comments on articles!)</span></h4></div>

<div class = "pp">(By posting a comment you are registering a Ghost Together account.)</div>
          
            <input id="comment-title"
              type="text" class="draft-editor-title-input"
              style="color: white; padding-left: 20px; width: 100%; font-weight: 500; border: 2px solid #4b4b4b !important; margin-bottom: 20px;"
              placeholder="Write subject of your comment here...be concise and specific..." />
        
            <input id="comment-username"
              type="text" class="draft-editor-title-input"
              style="color: white; padding-left: 20px; width: 100%; font-weight: 500; border: 2px solid #4b4b4b !important; margin-bottom: 20px;"
              placeholder="Username (A-z, 0-9, No Spaces)" />

Register

Post It

Just Keep Scrolling