CSS是網頁設計中不可或缺的一部分，而使用flex布局也能讓我們輕松實現HTML元素的對齊。接下來我將會分享如何使用flex布局進行上下對齊。

.container {
display: flex;
align-items: center;
}

在使用flex布局時，我們需要將元素的容器類設置為flex樣式，并使用align-items屬性來實現元素的垂直對齊。接下來，讓我們來看幾個例子。

1. 垂直居中

.container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
}

在上述代碼中，我們首先將容器的高度設置為400px，然后使用justify-content屬性將子元素水平居中，并使用align-items屬性將子元素垂直居中。

2. 文字對齊

.container {
display: flex;
font-size: 20px;
align-items: baseline;
}
.container p:first-child {
font-size: 24px;
}

在上述代碼中，我們使用align-items屬性將元素的基線對齊，這樣可以使得元素內的文字垂直對齊。同時，我們也可以通過設置不同的字體大小來實現元素內的文字上下對齊。

3. 圖片對齊

.container {
display: flex;
height: 400px;
align-items: flex-start;
}
.container img {
height: 100%;
}

在上述代碼中，我們使用align-items屬性將元素對齊到容器的頂部，同時使用高度100%讓圖片占據整個容器的高度。

總之，使用flex布局可以很輕松地實現HTML元素的上下對齊，讓我們的網頁更加美觀整潔。