Run
Save
Help
Keyboard Shortcuts
CTRL
+
Return
Run fiddly
CTRL
+
S
Save fiddly
CTRL
+
E
New fiddly
CTRL
+
Shift
+
Backspace
Reset Layout
Note:
Press
F11
when cursor is in the editor to toggle full screen editing.
Share link
Share full screen result
Embed on your website
Meta
Add library
jQuery 1.6.3
jQuery 1.7.2
jQuery 1.8.3
jQuery 2.1.0 Latest
Prototype 1.6.1
Prototype 1.7 Latest
YUI 3.10.0
YUI 2.9.0
MooTools 1.5.0
Dojo 1.8.4
Angular Latest
Angular 1.4.0 Stable
RequireJS 2.1.14
React with Add-Ons 0.14.3
ES5 shim 4.4.0
Ember 2.2.0
ThreeJS r73
Learn Flexbox in 5 Minutes
Share
Latest edits
1.
1
Embed iframe youtube video
2022-07-13 05:38:07
2.
1
Flex-box css properties
2022-05-29 09:53:05
3.
1
How to draw a triangle using CSS
2022-05-28 11:01:05
4.
1
RegEx for device name from user agent in javascript
2022-05-16 06:49:05
5.
1
Open whatsapp chat without save mobile number
2022-01-14 09:15:01
6.
1
navigator platform userAgent javascript
2020-12-29 07:12:12
7.
1
Window rename multiple file with pattern
2020-11-27 06:24:11
8.
1
How to check incognito in javascript
2020-08-07 11:07:08
More Posts
HTML
<div class="flex-container"> <div class="flex-item flex-item-1">Item 1</div> <div class="flex-item flex-item-2">Item 2</div> <div class="flex-item flex-item-3">Item 3</div> </div>
CSS
.flex-container { display: flex; background: pink; justify-content: center; /* align horizontally */ flex-direction: row; /* row|coloum */ /* align-items: center; */ /* align vertically */ height: 800px; /* flex-wrap: wrap; */ /* align-content: flex-end; */ } .flex-item { width: 200px; border: 2px solid; margin: 10px; background: skyblue } .flex-item-1 { min-height: 100px; /* flex-shrink: 0; */ align-self: flex-end; /* override => align-items */ flex: 1; /* flex-grow: 1; flex-basis: 0; */ } .flex-item-2 { min-height: 200px; /* flex-grow: 2; flex-basis: 0; */ flex: 2; /* shorthand => 2(grow) 0(shrink) 0px(shrink) */ } .flex-item-3 { min-height: 100px; /* flex-grow: 1; */ }
JS