flex container is an element on a page that contains flex items. All direct child elements of a flex container are flex items. (some of the properties apply to flex containers while others apply to flex items)
To use flex box, set the element’s display property to flex or inline-flex
.container {
display: flex;
justify-content: flex-end;
}
positions items from left to right
flex-start — all items will be positioned in order, starting from the left of the parent container, with no extra space between or before them.
flex-end — all items will be positioned in order, with the last item starting on the right side of the parent container, with no extra space between or after them.
center — all items will be positioned in order, in the center of the parent container with no extra space before, between, or after them.
space-around — items will be positioned with equal space before and after each item, resulting in double the space between elements.
space-between — items will be positioned with equal space between them, but no extra space before the first or after the last elements.
makes it possible to align items vertically
flex-start — all elements will be positioned at the top of the parent container.
flex-end — all elements will be positioned at the bottom of the parent container.
center — the center of all elements will be positioned halfway between the top and bottom of the parent container.
baseline — the bottom of the content of all items will be aligned with each other.
stretch — if possible, the items will stretch from top to bottom of the container (this is the default value; elements with a specified height will not stretch; elements with a minimum height or no height specified will stretch).
specifies if items should grow to fill a container and also which items should grow proportionally more or less than others
(default is 0)
specifies which elements will shrink and in what proportions.
(default is 1)
specifies the width of an item before it stretches or shrinks.
specifies how elements stretch and shrink.
declares flex-grow, flex-shrink, flex-basis in one line.
.big {
flex-grow: 2;
flex-shrink: 1;
flex-basis: 150px;
}
.small {
flex-grow: 1;
flex-shrink: 2;
flex-basis: 100px;
}
.big {
flex: 2 1 150px;
}
.small {
flex: 1 2 100px;
}
wrap — child elements of a flex container that don’t fit into a row will move down to the next line
wrap-reverse — the same functionality as wrap, but the order of rows within a flex container is reversed (for example, in a 2-row flexbox, the first row from a wrap container will become the second in wrap-reverse and the second row from the wrap container will become the first in wrap-reverse)
nowrap — prevents items from wrapping; this is the default value and is only necessary to override a wrap value set by a different CSS rule.
align-items property is used to space flex items from the top to the bottom of a flex container, that is within a single row
align-content is used to space the rows from top to bottom if there are multiple rows of content
flex-start — all rows of elements will be positioned at the top of the parent container with no extra space between.
flex-end — all rows of elements will be positioned at the bottom of the parent container with no extra space between.
center — all rows of elements will be positioned at the center of the parent element with no extra space between.
space-between — all rows of elements will be spaced evenly from the top to the bottom of the container with no space above the first or below the last.
space-around — all rows of elements will be spaced evenly from the top to the bottom of the container with the same amount of space at the top and bottom and between each element.
stretch — if a minimum height or no height is specified, the rows of elements will stretch to fill the parent container from top to bottom (default value).
In flex, there are two axis: main (horizontal) and cross (vertical)
The main axis is used to position flex items with the following properties:
The main axis and cross axis are interchangeable. We can switch them using the flex-direction property. If we add the flex-direction property and give it a value of column, the flex items will be ordered vertically, not horizontally.
row — elements will be positioned from left to right across the parent element starting from the top left corner (default).
row-reverse — elements will be positioned from right to left across the parent element starting from the top right corner.
column — elements will be positioned from top to bottom of the parent element starting from the top left corner.
column-reverse — elements will be positioned from the bottom to the top of the parent element starting from the bottom left corner.
shorthand. used to declare both flex-wrap and flex-direction properties in one line
declared on flex containers
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.container {
display: flex;
flex-flow: column wrap;
}
It is also possible to position flex containers inside of one another
Color values, like color and background-color, will blend to a new color.
Length values like font-size, width, and height will grow or shrink.
Duration is specified in seconds or milliseconds, such as 3s, 0.75s, 500ms. The default value is 0s, or instantaneous, as if there is no transition.
a {
transition-property: color;
transition-duration: 1s;
}
Default value is ease, which starts transition slowly, speeds up in the middle, slows down at the end
ease-in — starts slow, accelerates quickly, stops abruptly
ease-out — begins abruptly, slows down, and ends slowly
ease-in-out — starts slow, gets fast in the middle, and ends slowly
linear — constant speed throughout
specifies the time to wait before starting the transition
The properties must be specified in the order: transition-property, transition-duration, transition-timing-function, transition-delay.
transition-property: color;
transition-duration: 1.5s;
transition-timing-function: linear;
transition-delay: 0.5s;
transition: color 1.5s linear 0.5s;
With the shorthand transition rule, you can describe unique transitions for multiple properties, and combine them.
To combine transitions, add a comma (,) before the semicolon (;) in the rule. After the comma, use the same shorthand syntax.
It is common to use the same duration, timing function, and delay for multiple properties.
When this is the case set the transition-property value to all. This will apply the same values to all properties.
transition: all 1.5s linear 0.5s;
? flex 쓰면 그러면 @media로 반응적이게 안해도 되려나