use css to give an element the property and value of display: flex;.
preferably, you would do this to a <div>, but lots of other things work too.
okay, that makes them look nicer, but you can do this with regular divs and tables. what's so special here?
try resizing your browser window to see how the flex items interact.
the flex items grow and shrink to fit the container. neat, but there's a couple problems with this. for instance, if you shrink the container too much, the items will spill outside! that doesn't look too good. they're also aligned to the left of the box, which might not be very desirable.
fortunately, this is where the main draw of flex comes into play. flexboxes makes it easy to design website layouts, without having to resort to floating, positioning, or other techniques that don't scale super well across devices. flexboxes excel in liquid, responsive design, which is an essential consideration for modern web development.
let's adjust our css to rectify the problems mentioned earlier.
first up is flex-wrap, which defines how to handle flex items exiting the container.
by default, flex-wrap is set to nowrap. let's change that.
flex-wrapflex-wrap also supports the value wrap-reverse, which puts the wrapped items above the others as opposed to below.align-items as described below.
flex-wrap: wrap-reverse;now, when the container is too small to fit the whole row, the container will grow and the items will wrap around to fit. good stuff.
let's try tackling that item alignment using justify-content. by default, this is set to flex-start. let's change it to center and see what happens.
justify-contentjustify-content additionally supports the values flex-end, space-around, and space-between.justify-content: flex-end;justify-content: space-around;center, but places space between the items in addition to before and after.justify-content: space-between;space-around, but only puts space between the elements, not before or after.nice and centered. beautiful. but only horizontally. what if we want them to be centered vertically as well, because we're insane?
have no fear! we also have align-items at our disposal. by default, this is set to stretch, which stretches out the items to fit the container, like so:
align-items: flex-start; property from you this whole time, which prevents the content from stretching, like you see here.)this doesn't look great, which is why we have an align-items: flex-start; property on the above demonstrations.
however, we can also set it to flex-start, flex-end, or for our purposes, center.
align-itemsflex-end value.
align-items: flex-end;align-items also supports the value baseline, which aligns the elements based on the text baseline.align-items: baseline;behold! easy vertical alignment, while still being responsive and liquid in nature! bask in its glory! this is how you center a div.
the order property allows you to change the order that the flex items appear in.
by default, this is just the order that they are listed inside the HTML file, but this property outprioritizes that.
flex-grow. this specifies how much an individual item will grow lengthwise to fit the container.flex-shrink property which has the opposite effect.align-items? here's align-self, which applies to an individual item as opposed to every item in the container.align-items value of the container. otherwise, it functions exactly like align-items.
align-selfalign-self offers.
flexboxes are a very powerful tool. they are used to quickly and easily create liquid, responsive design layouts. they provide ease of use, simplicity, and extra flexibility when designing a web page. using them correctly, they will never conflict with your existing css, and require such minimal setup to use that even a caveman could do it. i've hardly scraped the surface of what you can do with flexbox. you can also use it with media queries, @keyframes, and more. it's amazing what they can do. with practically universal support, obscene extensibility, and amazing ease of integration, you're pretty much shooting yourself in the foot for not using them. try them out sooner or later.