[웹사이트 만들기] Advanced CSS

orangepeel·2023년 3월 25일
0

Flexible Box Layout (flexbox)

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

justify-content

.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.

align-items

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).

flex-grow

specifies if items should grow to fill a container and also which items should grow proportionally more or less than others
(default is 0)

flex-shrink

specifies which elements will shrink and in what proportions.
(default is 1)

flex-basis

specifies the width of an item before it stretches or shrinks.

flex

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;
}

flex-wrap

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-content

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).

flex-direction

In flex, there are two axis: main (horizontal) and cross (vertical)

The main axis is used to position flex items with the following properties:

  • justify-content
  • flex-wrap
  • flex-grow
  • flex-shrink
    The cross axis is used to position flex items with the following properties:
  • align-items
  • align-content

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.

flex-flow

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;
}

Nexted Flexboxes

It is also possible to position flex containers inside of one another

Transitions

transition-duration

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;
}

transition-timing-function

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

transition-delay

specifies the time to wait before starting the transition

Shorthand

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;

Combinations

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.

all

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로 반응적이게 안해도 되려나

0개의 댓글