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; }
مشاهده و ویرایش کد در حالت تمام صفحه
پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی با مقادیر یاد شده در این مطلب و در قالب فلکس باکس پشتیبانی می کنند.