Flexbox examples

Example 1

No flex attributes are set for any items. Defaults flex values are applied: flex: 1 1 auto;

Item one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas est in pharetra dapibus. Aenean condimentum justo in ligula feugiat cursus. Donec ultrices libero id mi tincidunt elementum. Nunc tempor lorem vel eros eleifend placerat. Sed id nulla magna.

Item two

Mauris pharetra nulla augue, et euismod elit iaculis quis. Donec laoreet elementum lectus sed rhoncus.

Item three

Vestibulum risus sem, aliquam sit amet odio in, vestibulum malesuada urna. Curabitur vulputate molestie ex et pellentesque. Suspendisse convallis nisi id arcu volutpat, sit amet hendrerit libero tristique. Quisque rhoncus sodales augue, sit amet malesuada nisl auctor at.

Example 2

All flex items are set to: flex: 1 1 600px;

Item one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas est in pharetra dapibus. Aenean condimentum justo in ligula feugiat cursus. Donec ultrices libero id mi tincidunt elementum. Nunc tempor lorem vel eros eleifend placerat. Sed id nulla magna.

Item two

Mauris pharetra nulla augue, et euismod elit iaculis quis. Donec laoreet elementum lectus sed rhoncus.

Item three

Vestibulum risus sem, aliquam sit amet odio in, vestibulum malesuada urna. Curabitur vulputate molestie ex et pellentesque. Suspendisse convallis nisi id arcu volutpat, sit amet hendrerit libero tristique. Quisque rhoncus sodales augue, sit amet malesuada nisl auctor at.

Example 3

The first flex item has fixed width: flex: 1 0 400px; All other items have default values.

Item one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur egestas est in pharetra dapibus. Aenean condimentum justo in ligula feugiat cursus. Donec ultrices libero id mi tincidunt elementum. Nunc tempor lorem vel eros eleifend placerat. Sed id nulla magna.

Item two

Mauris pharetra nulla augue, et euismod elit iaculis quis. Donec laoreet elementum lectus sed rhoncus.

Item three

Vestibulum risus sem, aliquam sit amet odio in, vestibulum malesuada urna. Curabitur vulputate molestie ex et pellentesque. Suspendisse convallis nisi id arcu volutpat, sit amet hendrerit libero tristique. Quisque rhoncus sodales augue, sit amet malesuada nisl auctor at.

Item four

Fusce pretium, nibh non porttitor blandit, nisi turpis auctor risus, at mattis dui orci nec nisi. Ut nec mi ligula. Aliquam eu tempus lectus, eget condimentum felis.