ویژگی align-self در CSS

align-self property

ویژگی align-self در (فلکس باکس) CSS، مقدار ویژگی align-items را در عناصر فکلس یا گرید لغو کرده و مقدار خود را جایگزین می کند.

نحوه نوشتار

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-items بر خلاف align-self در عنصر والد بکار برده شده و بر روی تمام عناصر فرزند اعمال می شود. اما ویژگی align-self در عناصر فرزند بکار برده شده و در صورت بکار برده شدن ویژگی align-items در عنصر والد، آنرا لغو کرده و مقدار خود را در عنصر فرزند جایگزین می کند.

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

html

<div class="wrapper">
    <p>align-items: <span>flex-start;</span></p>
    <section>
        <div class="box1">box1</div>
        <div class="box2 flex-start">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>
        <div class="box1">box1</div>
        <div class="box2 flex-end">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>
        <div class="box1">box1</div>
        <div class="box2 center">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>
        <div class="box1">box1</div>
        <div class="box2 baseline">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>
        <div class="box1">box1</div>
        <div class="box2 stretch">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;
    font-family: sans-serif;
}
.wrapper { margin: 10px 0; }
section {
    width: 225px;
    height: 225px;
    background-color: #dddddd;
    display: flex;
    align-items: center;
}
section div {
    flex: 1;
    text-align: center;
}
p {
    font-family: consolas;
    font-size: 0.85em;
}
span { color: red; }
.flex-start {
    align-self: flex-start; 
}
.flex-end {
    align-self: flex-end; 
}
.center {
    align-self: center; 
}
.baseline {
    align-self: baseline; 
}
.stretch {
    align-self: stretch; 
}
.box1 { background-color: lightgreen; }
.box2 {
    color: #ffffff;
    background-color: tomato;
    flex: 2;
}
.box3 { background-color: lightskyblue; }
.box4 { background-color: yellow; }

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

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