ویژگی align-content در CSS

align-content property

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

نحوه نوشتار

align-content: flex-start;     
align-content: flex-end;    
align-content: stretch;       
align-content: space-between; 
align-content: space-around;  

مقادیر

flex-start​

عناصر محتوا بصورت یکجا کنار قسمت آغازین عنصر والدِ فلکس قرار می گیرند.

flex-end​

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

stretch​

برای پر کردن فضای باقی مانده، فاصله بین ردیفهای عناصر افزایش پیدا می کند.

space-between​

فاصله بین ردیفهای عناصر به صورت یکسان پخش می شود. اولین و آخرین ردیف از عناصر به ابتدا و انتهای محور متقاطع عنصر والد می چسبد.

space-around​

فاصله بین عناصر محتوا با یکدیگر برابر است و فاصله عناصر ابتدا و انتها و عنصر والد، نصف اندازه فاصلۀ عناصر از یکدیگر است.

نکته: این ویژگی تاثیری بر یک ردیف از عناصر ندارد و برای تاثیر گذاری باید عناصر در چند ردیف حضور داشته باشند.

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

html

<div class="wrapper">
    <p>align-content: <span>flex-start;</span></p>
    <section class="flex-start">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</div>
<div class="wrapper">
    <p>align-content: <span>flex-end;</span></p>
    <section class="flex-end">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</div>
<div class="wrapper">
    <p>align-content: <span>center;</span></p>
    <section class="center">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</div>
<div class="wrapper">
    <p>align-content: <span>space-around;</span></p>
    <section class="space-around">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</div>
<div class="wrapper">
    <p>align-content: <span>space-between;</span></p>
    <section class="space-between">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </section>
</div>
<div class="wrapper">
    <p>align-content: <span>stretch;</span></p>
    <section class="stretch">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="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;
     flex-wrap: wrap;
}
section div {
     width: 68px;
     height: 68px;
}
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; 
}
.space-around {
     align-content: space-around; 
}
.space-between {
     align-content: space-between; 
}
.stretch {
     align-content: stretch; 
}
.box1 { background-color: lightgreen; }
.box2 { background-color: lightsalmon; }
.box3 { background-color: lightskyblue; }
.box4 { background-color: yellow; }

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

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