ویژگی justify-content در CSS

justify-content property

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

نحوه نوشتار

justify-content: flex-start; 
justify-content: flex-end;
justify-content: center
justify-content: space-around;
justify-content: space-between; 

مقادیر

flex-start

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

flex-end

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

center​

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

space-around

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

space-between

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

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

html

<div class="wrapper">
    <p>align-items: <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-items: <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-items: <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-items: <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-items: <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>

css

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

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

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