Flex and Grid
Flex
display: flex
: To sort/align items, you need a container to wrap them. Such as is a div styled withdisplay: flex
.wrapper { display: flex; } ``` d
flex-direction: row
: If flex-direction isrow
(or main axis) which is by default,justify-content
property aligns items horizontally, andalign-items
vertically..wrapper { display: flex; height: 100vh; flex-direction: row; justify-content: flex-start; /* Horizontal alignment */ align-items: center; /* Vertical alignment */ }
flex-direction: column
: If flex-direction iscolumn
(or cross axis),align-items
property aligns items horizontally, andjustify-content
vertically..wrapper { display: flex; height: 100vh; flex-direction: column; justify-content: space-between; /* Vertical alignment */ align-items: flex-start; /* Horizontal alignment */ }
align-self
: If you want to align a single item(or wrapper's child), you can usealign-self
property..box { width: 100px; height: 100px; background-color: peru; } .box:nth-child(2) { align-self: center; }
order
: If you want to change the order of a single or a group of items or when you can't change the html, you can simply useorder
property. Theorder
of each items in wrapper is 0 by default..box: nth-child(2) { order: 1; /* Move right by 1 */ }
When there are 3 items and 2th child
order
exceeds the total number, it is positioned rightmost. And 1th child whichorder
is smaller than 2th child, relatively placed in front of the last item(2th child)..box: nth-child(1) { order: 2; /* Move right by 2 --> in front of last item */ } .box: nth-child(2) { order: 3; /* Move right by 3 --> rightmose */ }
flex-wrap
: Flex basically tries to pack/squeeze all the items in one line. During this process, the originally specified width of an item is reduced. This property allows child items get properly arranged across multiple rows..wrapper { display: flex; flex-wrap: nowrap; /* wrap | wrap-reverse */ }
flex-flow
: The two properties flex-direction and flex-wrap are used so often together that the shorthand property flex-flow was created to combine them. This shorthand property accepts the value of one of the two properties separated by a space..wrapper { display: flex; flex-direction: column; flex-wrap: wrap; } to: .wrapper { display: flex; flex-flow: column wrap; /* shorthand of flex-direction and flex-wrap */ }
align-content
: Used to specify the height between rows when items are arranged across multiple rows. It has same values asjustify-content
property andspace-around
is the default value..wrapper { display: flex; flex-wrap: wrap; align-content: flex-start }
flex-shrink
: It determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn’t enough space on the row..box:nth-child(2) { background-color: tomato; flex-shrink: 2; }
Reference sites/docs
Last updated
Was this helpful?