Tidadigi Logo

CSS align-items Property

Trong CSS, align-items property dùng để căn chỉnh các flex item theo trục ngang trong flex container. Nó nhận các giá trị như flex-start flex-end center baseline và stretch. Các giá trị này kiểm soát căn chỉnh dọc các item trong flexbox.

Syntax

align-items: normal | stretch | center | flex-start | flex-end | baseline | first baseline | last baseline | 
start | end | self-start | self-end | safe center | unsafe center | initial | inherit;

Default Value

stretch

Property Values

Values

Description

stretch value

Kéo dài các item để lấp đầy không gian trống trên trục ngang.

center value

Căn giữa các item trên trục ngang.

flex-start value

Căn chỉnh các item vào cạnh bắt đầu của container trên trục ngang.

flex-end value

Căn chỉnh các item vào cạnh kết thúc của container trên trục ngang.

baseline value

Căn chỉnh các item dựa trên đường cơ sở của dòng chữ đầu tiên.

initial value

Đặt giá trị của thuộc tính về giá trị mặc định của nó.

inherit value

Kế thừa giá trị của thuộc tính từ phần tử cha.

Chúng ta sẽ khám phá từng giá trị thuộc tính cùng với ví dụ của chúng:

. Normal Value

Giá trị normal hoạt động như căn chỉnh mặc định trong flex container. Thường thì nó hoạt động giống như stretch trong hầu hết trường hợp. Nó làm cho các item lấp đầy trục ngang của container. Tuy nhiên nó có thể hoạt động khác đi tùy theo ngữ cảnh flex. Điều này còn phụ thuộc vào các thuộc tính cụ thể của item.

Syntax:

align-items: normal;

Example: Trong ví dụ này chúng ta minh họa thuộc tính align-items: normal trong flex container. Div normal có hai div con với nền xanh và đỏ. Theo mặc định chúng căn chỉnh theo dòng chảy tự nhiên của container. Chúng kéo dài để vừa với không gian có sẵn khi cần.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS align-items: normal Property
    </title>
    <style>
        #normal {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: normal;
        }
    </style</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="normal">
            <div style="background-color:blue;">
                Blue
            </div>
            <div style="background-color:red;">
                Red
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. stretch value

Giá trị stretch làm cho các flex item lấp đầy trục ngang của container. Nó điều chỉnh chiều cao hoặc chiều rộng để phù hợp với container.

Syntax:

align-items: stretch;

Example: Trong ví dụ này, chúng ta minh họa thuộc tính align-items: stretch trong flex container. Div #stretch có hai div con với nền tím và vàng. Chúng kéo dài để lấp đầy chiều cao của container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS align-items Property
    </title>
    <style>
        #stretch {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: stretch;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="stretch">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. center value

Giá trị align-items: center căn giữa các flex item theo chiều dọc dọc theo trục ngang của container. Nó căn chỉnh chúng ở giữa.

Syntax:

align-items: center;

Example: Trong ví dụ này, chúng ta sử dụng align-items: center trong flex container. Div #center chứa các div con màu tím và vàng. Chúng được căn giữa theo chiều dọc bên trong container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS align-items Property
    </title>
    <style>
        #center {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: center;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="center">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. flex-start value

Giá trị align-items: flex-start căn chỉnh các flex item về đầu trục ngang của container. Nó định vị chúng ở trên cùng.

Syntax:

align-items: flex-start;

Example: Trong ví dụ này chúng ta sử dụng align-items: flex-start trong flex container. Div #flex-start chứa các div con màu tím và vàng. Chúng được căn chỉnh ở trên cùng bên trong container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
        #flex-start {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: flex-start;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="flex-start">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. flex-end value

Giá trị align-items: flex-end căn chỉnh các flex item về cuối trục ngang của container. Nó định vị chúng ở dưới cùng.

Syntax:

align-items: flex-end;

Example: Trong ví dụ này, chúng ta sử dụng align-items: flex-end trong flex container. Div #flex-end chứa các div con màu tím và vàng. Chúng được căn chỉnh ở dưới cùng bên trong container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
        #flex-end {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: flex-end;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="flex-end">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. baseline value

Giá trị align-items: baseline căn chỉnh các flex item dọc theo trục ngang của container. Nó dựa trên đường cơ sở của chúng, đảm bảo tính nhất quán khi căn chỉnh văn bản.

Syntax:

align-items: baseline;

Example: Trong ví dụ này, chúng ta sử dụng align-items: baseline trong flex container. Div #baseline chứa các div con màu tím và vàng. Chúng được căn chỉnh dọc theo đường cơ sở của chúng bên trong container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | align-items Property
    </title>
    <style>
        #flex-end {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: flex-end;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="flex-end">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. initial value

Giá trị align-items: initial đặt thuộc tính về giá trị mặc định của nó. Giá trị mặc định là `stretch`, căn chỉnh các item để lấp đầy container.

Syntax:

align-items: initial;

Example: Trong ví dụ này, chúng ta sử dụng align-items: initial trong flex container. Div #initial chứa các div con màu tím và vàng. Chúng được căn chỉnh dựa trên cài đặt mặc định của trình duyệt bên trong container.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>
        CSS align-items Property
    </title>
    <style>
        #initial {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: initial;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="initial">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

. inherit Value

Giá trị inherit cho thuộc tính align-items làm cho phần tử kế thừa cách căn chỉnh từ phần tử cha. Điều này có nghĩa là các item trong phần tử sẽ được căn chỉnh giống phần tử cha.

Syntax:

align-items: inherit;

Example: Trong ví dụ này, chúng ta sử dụng align-items: inherit trong flex container. Div #inherit chứa các div con màu tím và vàng. Chúng được căn chỉnh dựa theo phần tử cha có align-items: flex-end.

HTML 
<!DOCTYPE html>
<html>
<head>
    <title>
        CSS align-items Property
    </title>
    <style>
        #initial {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: flex-end; /* Parent container's alignment */
        }

        #inherit {
            width: 320px;
            height: 200px;
            border: 2px solid black;
            display: flex;
            align-items: inherit;
        }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>

        <div id="initial">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

        <div id="inherit">
            <div style="background-color:Purple;">
                Purple
            </div>
            <div style="background-color:Yellow;">
                Yellow
            </div>
        </div>

    </center>
</body>

</html>

Output:

css-align-items-property

Supported Browsers

Dưới đây là danh sách các trình duyệt được hỗ trợ bởi CSS align-items property:

Hầu hết các trình duyệt hiện đại đều hỗ trợ các thuộc tính này. Tuy nhiên một số trình duyệt cũ hoặc ít phổ biến hơn có thể không hỗ trợ đầy đủ. Thuộc tính align-items bao gồm:

  • Internet Explorer (hỗ trợ một phần trong IE 11 với các tính năng flexbox hạn chế)
  • Opera Mini (thiếu hỗ trợ đầy đủ cho flexbox và các thuộc tính liên quan)

Last Updated : 21/07/2025