آموزش CSS Flexbox
آموزش کامل CSS Flexbox بصورت پروژه محور همراه با چندین مثال و یک قالب ریسپانسیو. کدهای زیر را در یک فایل با پسوند html ذخیره کرده و اجرا نمایید تا نتیجه را ببینید.
با استفاده از CSS Flexbox می توانیم قالب های ریسپانسیو بدون دستورات float or positioning طراحی کنیم.
ویژگی display
در این بخش از آموزش css از تاپ سایت 98 به ویژگی display از نوع flex می پردازیم.
برای شروع کار یک div با کلاس flex container معرفی می کنیم و چندین div دیگر با مقادیر 1 و 2 و 3 مشخص می کنیم.
در بخش style برای کلاس flex-container دستور display با مقدار flex استفاده می کنیم.
برای div های زیر آن نیز استایل می نویسیم تا باکس های کوچکی ایجاد شود.
کد زیر را در فایل html ذخیره کرده و اجرا کنید تا نتیجه را ببینید.
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: cornflowerblue;
}
.flex-container div {
background-color: lightgray;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
<p>topsite98.com</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
ویژگی flex-direction
ویژگی flex-direction مشخص می کند که عناصر به چه شکل قرار بگیرند.
مقدار column عناصر را زیر هم قرار می دهد.
مقدار row عناصر را کنار هم قرار می دهد.
مقدار column-reverse عناصر را زیر هم قرار می دهد و معکوس.
مقدار row-reverse عناصر را کنار هم قرار می دهد و معکوس یعنی از راست به چپ می کند.
کد زیر را در با کد بالا جایگزین کرده و ذخیره و سپس اجرا نمایید.
display: flex;
flex-direction: column;
background-color: cornflowerblue;
}
ویژگی flex-wrap
با ویژگی flex-wrap می توان باکس را ریسپانسیو یا واکنشگرا کرد.
در حالت عادی اگر اندازه باکس ها زیاد باشد حالت ریسپانسیو از بین می رود و اسکرول افقی بوجود می آید.
مقدار nowrap حالت پیش فرض است و ریسپانسیو نیست.
مقدار wrap باکس ها را ریسپانسیو می کند.
مقدار wrap-reverse باکس ریسپانسیو می شود و معکوس.
برا فهم بهتر کد زیر را در یک فایل html ذخیره نمایید و اجرا کنید. سپس سایز افقی صفحه وب را کم و زیاد کنید اگر ویژگی flex-wrap مقدار wrap بگیرد متوجه می شوید که باکس ریسپانسیو یا واکنشگرا شده است و اسکرول افقی نمی خورد.
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
background-color: cornflowerblue;
}
.flex-container div {
background-color: lightgray;
margin: 10px;
padding: 20px;
width: 100px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>sh711.com</h1>
<p>topsite98.com</p>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
<div>11</div>
<div>12</div>
</div>
</body>
</html>
ویژگی flex-flow
ویژگی flex-flow مختصرکننده ویژگی های flex-wrap و flex-direction است.
در مثال زیر بجای استفاده از این دو دستور کافی است از ویژگی flex-flow استفاده شود.
display: flex;
flex-flow: row wrap;
background-color: cornflowerblue;
}
ویژگی justify-content
با ویژگی justify-content می توانید محتوای باکس اصلی را در بخش های مختلف و با حالات مختلف نمایش دهید.
مقدار flex-end باکس های داخل باکس اصلی را از آخر قرار می دهد.
مقدار space-around فاصله ای بین باکس های داخلی قرار می دهد.
مقدار space-between فاصله ای بین باکس های داخلی قرار می دهد ولی باکس اول و آخر فاصله ای از راست و چپ نخواهد داشت.
مقدار center باکس ها را وسط چین می کند.
مقدار right باکس ها را راست چین می کند.
مقدار left باکس ها را چپ چین می کند.
display: flex;
flex-flow: row wrap;
justify-content: center;
background-color: cornflowerblue;
}
ویژگی align-item
ویژگی align-item در جهت عمودی (vertical) عناصر را مرتب می کند.
مثلا اگر می خواهید عناصر در وسط صفحه در حالت عمودی قرار بگیرند مقدار center را استفاده کنید.
display: flex;
height: 200px;
align-items: center;
}
ویژگی align-content
ویژگی align-content برای تراز کردن خطوط flex استفاده می شود.
مقدار space-between فضای بین مقدار خطوط flex را با فاصله مساوی بین آنها نشان می دهد و فاصله ای بین باکس ها ایجاد می کند. با تغییر سایز مرورگر می توانید نتیجه را ببینید تعداد باکس ها را 12 عدد کنید تا بهتر متوجه ویژگی شوید.
مقدار space-around مقدار فضای اطراف خطوط flex را با فضای قبل، بین و بعد از آنها نشان می دهد.
مقدار stretch حالت پیش فرض است.
مقدار center عناصر را در وسط باکس اصلی قرار می دهد.
مقدار flex-start باکس ها از ابتدای باکس اصلی مرتب می کند و نمایش می دهد.
مقدار flex-end باکس ها در انتهای باکس اصلی نمایش می دهد.
display: flex;
flex-flow: row wrap;
align-content: flex-end;
background-color: cornflowerblue;
height: 500px;
}
ویژگی order
ویژگی order باکس ها را بر اساس order منظم می کند و نمایش می دهد.
در مثال زیر باکس شماره یک ابتدا نمایش داده می شود.
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
ویژگی flex-grow
ویژگی flex-grow اندازه باکس را مشخص می کند.
باکس سوم 8 برابر بقیه است.
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>
ویژگی flex-shrink
ویژگی flex-shrink مشخص می کند که مقدار انعطاف پذیری نسبت به بقیه اقلام انعطاف پذیر کاهش می یابد.
شماره 3 انطلاف پذیری ندارد.
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
ویژگی flex-basis
ویژگی flex-basis طول اولیه یک محصول فلکس (flax) را مشخص می کند.
<div>1</div>
<div>2</div>
<div style="flex-basis:200px">3</div>
<div>4</div>
</div>
ویژگی flex
ویژگی flex مختصر ویژگی های flex-grow, flex-shrink, flex-basis می باشد یعنی بجای اینکه این سه دستور را جداگانه استفاده کنیم می توانیم همه را در یک خط با ویژگی flex بنویسیم.
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>
ویژگی align-self
خصوصیات align-self تراز برای آیتم انتخاب شده داخل FLEX را مشخص می کند.
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
طراحی قالب ریسپانسیو با Flexbox
در زیر طراحی قالب ریسپانسیو با Flexbox را مشاهده می فرمایید.
یک مینی پروژه طراحی قالب واکنشگرا با Flexbox میباشد.
کد html,css زیر را می توانید در یک فایل html قرار داده و ذخیره نمایید و اجرا کنید.
<html>
<head>
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.wrapper > * {
padding: 10px;
flex: 1 100%;
}
.header {
background: tomato;
}
.footer {
background: lightgreen;
}
.main {
text-align: left;
background: deepskyblue;
}
.aside-1 {
background: gold;
}
.aside-2 {
background: hotpink;
}
@media all and (min-width: 600px) {
.aside { flex: 1 0 0; }
}
@media all and (min-width: 800px) {
.main { flex: 3 0px; }
.aside-1 { order: 1; }
.main { order: 2; }
.aside-2 { order: 3; }
.footer { order: 4; }
}
body {
padding: 2em;
}
</style>
</head>
<body>
<div class="wrapper">
<header class="header">Header</header>
<article class="main">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</article>
<aside class="aside aside-1">Aside 1</aside>
<aside class="aside aside-2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
امیدواریم این آموزش برای شما مفید باشد.
موفق باشید.
منبع: دبلیو تری اسکولز
تگ:
نظرات کاربران
از دیدگاه مرتبط با موضوع استفاده نمایید.
از تبلیغ سایت یا شبکه اجتماعی خودداری فرمایید.
برای پاسخ گویی بهتر در سایت ثبت نام نمایید و سپس سوال خود را مطرح فرمایید.
این سایت بفروش می رسد با سئو عالی و بازدید بالا. تماس بگیرید
اگر سوال یا نظری دارید در بخش کامنت ها بنویسید.اگر موضوع خاصی مد نظر شماست که در سایت موجود نیست در بخش کامنت ها بنویسید