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