این آموزش در تاریخ ۱۴۰۲/۰۶/۲۸ آپدیت شده است.
آموزش کار با ستون ها یا Columns در CSS3
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با ستون ها یا Columns در CSS3 با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با ستون ها یا Columns در CSS3
در زبان CSS ما با استفاده از ویژگی Columns میتونیم از محتوامون چندین ستون ایجاد کنیم، مثلا مثه روزنامه یا مثلا مثه یه گالری تصاویر و..
- Columns : مشخص کردن تعداد و اندازه ستون ها
- Column-Gap : فاصله بین ستون ها
- Column-Span : برای ادغام کردن محتوا بروی ستون ها
- Column-Fill : نحوه پرشدن ستون هارو مشخص میکنه
- Column-Rule : مشخص کردن خط بین ستون ها
Free-Learn
مشخص کردن تعداد و اندازه ستون ها
با استفاده از ویژگی Columns به راحتی میتونیم اندازه و تعداد ستون هارو مشخص کنیم.
- مقدار اول یعنی حداقلی ترین اندازه هریک از ستون ها
- مقدار دوم یعنی حداکثر تعداد ستون ها
مثال شماره ۱ : گفتیم تعداد ستون ها ۳تا باشه و کمترین ( حداقل ) اندازه هریک از ستون ها ۵۰ پیکسل باشه
|
1 2 3 |
.MyBox{ columns:50px 3; } |
Free-Learn
فاصله بین ستون ها
با استفاده از ویژگی column-gap میتونیم یک فضا ( فاصله ) مشخصی رو بین ستون ها ایجاد کنیم.
|
1 2 3 |
.MyBox{ column-gap: 40px; } |
Free-Learn
ادغام کردن محتوا بروی ستون ها
بصورت پیش فرض اگه متن / محتوایی درون باکس قرار داشته باشه خب اونم بصورت خودکار حالت ستونی بخودش میگیره ولی ما با استفاده از ویژگی column-span میتونیم از ستونی شدن اون متن جلوگیری کنیم.
|
1 2 3 |
.MyBox h2{ column-span: all; } |
Free-Learn
نحوه پُر یا تکمیل شدن ستون ها
با استفاده از ویژگی column-fill میتوان مشخص کرد که ستون ها به چه صورت پُر ( تکمیل ) شوند، مثلا در این حالت تا یک ستون بطور کامل پُراز محتوا نشه نمیزاره محتوای اون ستون به ستون بعدی بره.
|
1 2 3 4 |
.MyBox{ column-fill: auto; height: 170px; } |
Free-Learn
ایجاد خط بین ستون ها
با استفاده از ویژگی column-rule میتونیم بین ستون ها یک خط بکشیم و بهش استایل بدیم.
|
1 2 3 |
.MyBox{ column-rule: 4px solid #04aa6d; } |
