HTML, CSS

A good tool to learn CSS is Flexbox Froggy. You use display: flex;, then can add justify-content: x to align items horizontally and to align items vertically use align-items: y.

#pond {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

##CSS Selection

Check out http://flukeout.github.io/

###Justify Content

justify-content aligns items horizontally. This property can have these values:

flex-start is the default, items start at the beginning of the container
flex-end puts items at the end of the container
center puts items at the center of the container
space-between puts items with space between the lines. This looks like: SASBSCS
space-around puts items with space before, between, and after the lines. Space around kinda looks like: ASSBSSC
initial sets the property to the default value.
inherit gets the property of its parent element

###Align Items

align-items aligns items vertically. This property can have these values:

stretch is the default, items are stretched to fit the container
center puts items at the center of the container
flex-start puts items at the beginning of the container
flex-end puts items at the end of the container
baseline puts items at the baseline of the container
initial sets the property to the default value
inherit gets the property of its parent element

####Align Content

align-content sets how multiple lines are spaced apart from each other. This property can have these values:

flex-start has the lines packed at the top of the container
flex-end has the lines packed at the bottom of the container
center has the lines centered in the container
space-between has the lines with equal spacing between them
space-around has the lines with equal spacing around them
stretch has the lines stretched to fit the container
initial sets the property to the default value
inherit gets the property of its parent element

####Align Self

align-self Gives you control over individual items vertically. Say everything should be on the top, but your yellow item wants to be on the bottom.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: flex-end;
}

###Flex Direction

flex-direction changes the direction. E.g. We have: G Y R, but need R Y G so we use flex-direction: row-reverse. This property can have these values:

row is the default, items are placed in the same order as the text direction (e.g. G Y R returns G Y R) moving along horizontally.
row-reverse places the items in the opposite direction of the text along horizontally. (e.g. G Y R returns R Y G)
column is where items are placed top to bottom along vertically. E.g. G Y R would return G Y R vertically
column-reverse is where items are placed bottom to top along vertically. E.g. G Y R would return R Y G vertically

####Order

If you need more than flex-direction, you can specify a specific order. By default items have a value of 0. We can set items to a positive or negative value (e.g. order: 1; would put an item last)

#pond {
  display: flex;
}

.shouldbefirst {
  order: 0;
}

.shouldbelast {
  order: 1;
}

###Flex Wrap

flex-wrap specifies whether items wrap around the line or not.

nowrap is the default value, will not wrap
wrap says that the flexible items will wrap if necessary
wrap-reverse says that the flexible items will wrap if necessary in reverse order
initial sets the property to the default value
inherit gets the property of its parent element

HTML, CSS

Related Posts