Flexbox is a layout module in CSS that makes it easier to create flexible, responsive layouts and alignments. It allows you to lay out elements in a one-dimensional row or column and automatically adjusts the size and position of elements to fit within the container. Here are some of the main properties associated with flexbox:

## flex-flow 
This shorthand property for flex-direction and flex-wrap allows you to set both values in a single line.
```css
.container {
  display: flex;
  flex-flow: row wrap; /* flex items are laid out in a row and will wrap to the next line when they reach the end of the container */
}
```

## justify-content
This property aligns the flex items along the main axis (horizontally for row flex direction and vertically for column flex direction). The possible values are flex-start, flex-end, center, space-between, and space-around. The default value is flex-start.
```css
.container {
  display: flex;
  justify-content: flex-start; /* aligns the flex items to the start of the container */
}

.container {
  display: flex;
  justify-content: flex-end; /* aligns the flex items to the end of the container */
}
```


It can have one of the following values:
- `flex-start`;
- `flex-end`;
- `center`. Elements are centered along the main axis;
- `space-between`. Elements are evenly distributed along the main axis, with equal space between them;
- `space-around`. Elements are evenly distributed along the main axis, with equal space before, between, and after them;
- `align-items`. This property aligns elements along the cross-axis. It can have one of the following values:

## align-items
property is used to align the items along the flex container's cross axis. The cross axis is the axis that runs perpendicular to the main axis (the axis defined by the `flex-direction` property).

For example, if the `flex-direction` property is set to row, the main axis is horizontal, and the cross axis is vertical. In this case, `align-items` can align the items vertically within the flex container.

Here's an example of using `align-items` to center the items vertically within a flex container:
```css
.container {
  display: flex;
  align-items: center;
}
```

- `flex-start`. This value aligns the items to the start of the cross-axis;
- `flex-end`. This value aligns the items to the end of the cross-axis;
- `baseline`. This value aligns the items to the baseline of the text within them;
- `stretch`. This value stretches the items to fill the full length of the cross-axis. This is the default value. 


Continue learning CSS. CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in a markup language like HTML. CSS is a fundamental building block of the modern web and controls the styling and layout of websites and web applications.

This section will cover the general styling used for layout and text formatting to create a visually appealing and user-friendly design for your webpage. Part II.

This section relates to colors and backgrounds in CSS. You will learn about various color formats, combining multiple colors into a gradient, and any CSS element's background management.

This section will focus on positioning elements on a webpage. By the end of this section, you should have a solid understanding of the different layout options available in CSS.

Introduction to CSS Part II

Flexbox Properties

flex-flow

justify-content

align-items