Learn CSS Flexbox in Interactive Way

1 min read
Read in other languages: Bahasa Indonesia

🔗 Flexbox Playground

Container

Flex Direction

Flex Wrap

Justify Content

Align Items

Align Content

Item

Item 1

Order

Flex Grow

Flex Shrink

Flex Basis

Align Self

Item 2

Order

Flex Grow

Flex Shrink

Flex Basis

Align Self

Item 3

Order

Flex Grow

Flex Shrink

Flex Basis

Align Self

<div class="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
</div>
<style>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  height: 100%;
}
.item {
  background-color: #ed8936;
  color: #fff;
  width: 4rem;
  height: 4rem;
  border-radius: 0.25rem;
  margin: 0.25rem;
  padding: 1rem;
  text-align: center;
  font-size: 1.25rem;
  cursor: pointer;
}
</style>
Edit the demo on Github AppFlexbox

🔗 Key Takeaways

So what do you think is Flexbox? Please answer by ordering the random words below to make the right answer. Your answers will be stored in Firestore database for 30 days.

So whenever you access this page, You still be able to see your answers, as long as it’s within the 30 day period.

🔗 References

  1. CSS Tricks: A Complete Guide to Flexbox
  2. Mozilla Developer Network: Flexbox
  3. W3Schools: CSS Flexbox