#flex-box

Continue with previous post  Flexbox 3x3 gallery + Sass lets dive to Basic Transition CSS with great free course   Creating CSS Transitions by scotch.io  Feel free to fork my codepen and make more flexible this layout. I use such sass features:  1.  lighten($color, $amount)  Makes a color lighter. 2.  darken($color, $amount)  Makes a color darker. 3.  map-get($map, $key)  Returns the value in a map associated with a given key. 4. and flex-grow,flex-shrink, flex-basic - property.  5. css transition: ease-in-out, easy, linear.

Messenger App with Laravel, Vue.JS & Laravel Echo (E01 – setup and components)

[ad_1] In this small series we’ll create a Messenger like application together. I’ll show you how we can structure our components in a logical way, design all with flex … source [ad_2]

Making Future Interfaces: Algorithmic Layouts

Hello my friends!

Let's organize your application's structure!

Are you tired of using the float attribute to put the elements to the left or to the right and leave a good alignmen, your problems are over!

via GIPHY

Flexbox automatically organizes your elements for their goals! It fits any device, without you being able to tweak the CSS of the elements individually.

Use:

display: flex; flex-wrap: wrap;

What was this:

It turned out this:

Results:

Test yourself: .flex { display: flex; flex-wrap: wrap; border: #000 .1rem solid; padding: 1rem; } .flex div { background-color: #000; color: #fff; width: 5rem; margin: 1rem; text-align: center; line-height: 10rem; font-size: 16pt; }

Fiambre

Fiambre

Fiambre

Fiambre

Fiambre

Fiambre