ویژگی align-items در CSS

align-items property

ویژگی align-items در (فلکس باکس) CSS نحوه ترازبندی عناصرِ فرزندِ یک عنصر فلکس را در راستای محور متقاطع فلکس باکس مشخص می کند.

نحوه نوشتار

align-items: stretch; 
align-items: flex-start;
align-items: flex-end
align-items: center;
align-items: baseline; 

مقادیر

stretch​

عناصر کشیده می شوند و در قالب عنصر والد قرار می گیرند. این مقدار پیشفرض است.

flex-start​

عناصر در ابتدای محور متقاطع عنصر والد قرار می گیرند.

flex-end​

عناصر در انتهای محور متقاطع عنصر والد قرار می گیرند.

center​

عناصر در وسط عنصر والد قرار می گیرند.

baseline​

عناصر بر مبنای خط متنی فرضی ترازبندی می شوند.

نکته: برای ترازبندی عناصر بصورت تکی از ویژگی align-self استفاده می کنیم.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

html

<div class="wrapper">
     <p>align-items: <span>flex-start;</span></p>
     <section class="flex-start">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
     </section>
</div>
<div class="wrapper">
    <p>align-items: <span>flex-end;</span></p>
    <section class="flex-end">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
     </section>
</div>
<div class="wrapper">
    <p>align-items: <span>center;</span></p>
    <section class="center">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </section>
</div>
<div class="wrapper">
    <p>align-items: <span>baseline;</span></p>
    <section class="baseline">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
     </section>
</div>
<div class="wrapper">
    <p>align-items: <span>stretch;</span></p>
    <section class="stretch">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
    </section>
</div>

css

body {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
}
.wrapper {
     margin: 10px 0;
}
section {
     width: 225px;
     height: 280px;
     background-color: #dddddd;
     display: flex;
}
p {
     font-family: consolas;
     font-size: 0.84em;
}
span { color: red; }
.flex-start {
     align-content: flex-start; 
}
.flex-end {
     align-content: flex-end; 
}
.center {
     align-content: center; 
}
.baseline {
     align-content: baseline; 
}
.stretch {
     align-content: stretch; 
}
.box1 { background-color: lightgreen; }
.box2 { background-color: lightsalmon; }
.box3 { background-color: lightskyblue; }
.box4 { background-color: yellow; }

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی با مقادیر یاد شده در این مطلب آموزشی پشتیبانی می کنند.