Codelab Editor
Free Online HTML Editor
Run
Learn CSS
<!DOCTYPE html> <html> <head> <style> /* ============== Flexbox justify-content ============== */ .flex-container { display: flex; justify-content: space-between; background: #333; padding: 10px; } .flex-item { background: #97ff99; border: 1px solid #333; text-align: center; padding: 10px; width: 80px; height: 50px; line-height: 30px; } /* ============== Flexbox justify-content ============== */ </style> </head> <body> <h1 class="heading">justify-content</h1> <p class="description">The <code>justify-content</code> property in Flexbox controls how flex items are spaced along the main axis. You can align them to the start, end, center, or distribute extra space evenly.</p> <div class="flex-container"> <div class="flex-item">1</div> <div class="flex-item">2</div> <div class="flex-item">3</div> </div> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console