Flexbox

Défaut

flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse

no-wrap

wrap

align-items: center

align-items: flex-start

align-items: flex-end

justify-content:center

justify-content:flex-start

justify-content:flex-end

justify-content:space-between

justify-content:space-around

justify-content:space-evenly

order

grow

shrink

grow

flex-grow:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, ratione accusantium magni recusandae doloremque esse fuga culpa asperiores quos corrupti? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, impedit, officia, quasi dolorum nostrum aliquam quis accusamus accusantium harum voluptates explicabo inventore quo eius officiis ex non laudantium id error?

flex-grow:2

Quaerat eligendi possimus quisquam quod ullam animi numquam quos quas! Consectetur, cum, commodi expedita omnis cumque magni voluptates eius perspiciatis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quidem, doloremque officiis sed vitae molestiae nostrum eos voluptate quia pariatur reiciendis laboriosam alias at sit distinctio id corporis quas assumenda.

flex-grow:1

Hic, maiores, architecto impedit error veniam libero id nam distinctio voluptatibus perferendis quidem soluta praesentium asperiores eius eaque numquam a! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, ratione, rerum odit fugit expedita totam et maxime recusandae dicta veritatis voluptate hic harum repellat illo soluta enim vero provident vitae.