flex-start is a Flexbox alignment value that places items at the beginning of their container. Along a horizontal main axis, that usually means the left side; along a vertical main axis, it means the top. It is the default value for justify-content, so writing it explicitly is optional. section 12.2 section 20.10
To use flex-start:
- Make the element a flex container with display: flex. section 12.2
- Choose the main axis with flex-direction. section 12.2
- Apply justify-content: flex-start when you want items grouped at the beginning of that axis. section 12.2
container {
display: flex;
justify-content: flex-start|flex-end|center|space-between|space-around;
}
Try flex-start alongside flex-end, center, space-between, and space-around to compare how the same flex container distributes its items. section 12.2
A portfolio column
A portfolio page can use a column flex container with justify-content: flex-start to keep its content gathered at the top. Change the value to center or flex-end and watch the group move. section 20.10
