به آموزشگاه مجازی سینا خوش آمدید!

مقدمه آموزش Flexbox در CSS

امتیاز
(0)

آموزش Flexbox در CSS (چینش جعبه ایِ انعطاف پذیر)

Flexbox(فلکس باکس)در CSS، خلاصه ی عبارت: ماژول چینش جعبه ایِ انعطاف پذیر در CSS است. فلکس باکس یک مدلِ چینش، برای مرتب سازی آیتم ها(به صورت افقی یا عمودی) در داخل یک ظرف(container)، به صورت انعطاف پذیر و واکنشگرا است. فلکس باکس، به سادگی، طراحی یک چینش(layout) انعطاف پذیر و واکنشگرا را بدون استفاده از شناور بودن(float) و موقعیت دهی(positioning) فراهم می کند.

مثال شماره 1

امتحان کنید

فلکس باکس(Flexbox) در مقابل گرید(Grid) در CSS

از Flexbox در CSS برای چینش های یک بعدی، به صورت ردیفی یا ستونی استفاده می شود. 

از گرید(Grid) در CSS برای چینش های دو بعدی، به صوت ردیفی و ستونی استفاده می شود. 

اجزاء Flexbox در CSS

یک flexbox همواره شامل موارد زیر است:

  1. یک ظرف Flex : عنصر والد(ظرف)، یعنی جایی که ویژگی display در آن، برابر با flex یا inline-flex قرار می گیرد. 
  2. یک یا چند آیتم Flex : فرزندان مستقیم ظرف Flex که به طور اتوماتیک بعنوان آیتم های flex در نظر گرفته می شوند.

یک ظرف Flex به همراه سه آیتم Flex

عنصر زیر، یک ظرف فلکس(ناحیه ی آبی رنگ) را به همراه سه ایتم فلکس، مشخص می کند. 

مثال شماره 1

یک ظرف فلکس به همراه سه آیتم:

 <html>
<head>
<style>
.container {
  display: flex;
  background-color: DodgerBlue;
}

.container div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

</body>
</html>
امتحان کنید

 

منبع: https://www.w3schools.com/css

 

  • بازدید: 25

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال