آموزش flexbox مقدماتی جلسه ۱

0 دیدگاه 109 آموزش flexbox

آموزش flexbox

فهرست موضوعات در این آموزش

Flexbox يا همان Flexible Box Layout Model هم ناميده ميشود, به مجموعه اي از قوانين CSS گفته ميشود که ميتواند طراحي و چيدمان را براي حالتهاي Responsive بسيار راحتتر نمايد. Flexbox يکي از اولين تکنيک هاي css ميباشد که در دنياي مدرن وب امروزه مورد استفاده قرار ميگيرد. تا قبل از معرفي شدن flexbox هيچ تکنيک مطمئن و معتبري براي پياده سازي وب سايت هاي ريسپانسيو وجود نداشته است.

به عبارت دیگر flexbox یک سیستم صفحه آرایی یک بعدی است که میتوانیم از آن برای درست کردن ردیف یا ستون استفاده کنیم.فلکس باکس کار ما را برای طراحی وب و درست کردن صفحات رسپانسیو آسان کرده بدون نیاز به استفاده کردن از ویژگی هایی مانند float وposition که در css وجود دارد.

آموزش flexbox

آموزش کامل Flexbox در CSS

خب در ادامه میخوام شمارو بطور کامل با فناوری / تکنیک جذاب فلکس باکس در CSS آشنا کنم، لطفا در ادامه و تا پایان این جلسه با پاسخ وردپرس همراه باشید.

پس برای اینکه حالت نمایش یک تگ ( که میخوایم مثه یه ظرف باشه برامون ) بصورت Flex یا فلکس باشه ما باید از ویژگی Display با مقدار Flex استفاده نماییم.

.flex-container{
  display: flex;
}

.flex-container{

display: flex;

}

بعد از اون دیگه میتونیم از ویژگی هایی که فلکس باکس در اختیارمون گذاشته بروی ظرف یا Container که ایجاد کردیم استفاده نماییم.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">item1</div>
        <div class="flex-item">item2</div>
        <div class="flex-item">item3</div>
        <div class="flex-item">item4</div>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

آیتم های فلکس باکس را از کد های بالا استفاده نمایید .

توجه داشته باشید که هر از ویژگی های زیر تنها در صورتی عمل خواهند کرد که ویژگی display تگ ( همون ظرف یا کانتینر ) بروی flex تنظیم شده باشد.

برای این که یک استایل مناسب داشته باشه میتوانید از استایل زیر استفاده نمایید .

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.flex-container{
    width: 50rem;
    background-color: rgb(112, 112, 112);
    border-radius: 0.2rem;
    padding: 1rem;
    margin: 2rem auto;
    display: flex;
}
.flex-item{
    width: 8rem;
    height: 7rem;
    line-height: 7rem;
    background-color: blueviolet;
    margin: 0.5rem;
    font-size: 2rem;
    text-align: center;
}

margin: 0;

padding: 0;

box-sizing: border-box;

}

.flex-container{

width: 50rem;

background-color: rgb(112, 112, 112);

border-radius: 0.2rem;

padding: 1rem;

margin: 2rem auto;

display: flex;

}

.flex-item{

width: 8rem;

height: 7rem;

line-height: 7rem;

background-color: blueviolet;

margin: 0.5rem;

font-size: 2rem;

text-align: center;

}

از ویژگی های زیر فقط باید در عنصر والد یا پدر که حالت نمایشش فلکس می باشد استفاده کرد.

ویژه گی flex-direction در css

گفتیم که با فعال شدن دستور display: flex یا همان خاصیت Flex، عناصر فرزند در راستای یه خط مرتب می شوند. همچنین گفتیم که با فعال شدن دستور مذکور یک سری ویژگی دیگر نیز امکان فعال شدن دارند. یکی از ان ویژگی ها Flex direction است.

توسط خاصیت Flex direction در css می‌تونیم سطر رو به ستون تبدیل کنیم.

ویژگی Flex direction در css چهار مقدار زیر را می پذیر که هرکدام کاری خاص را انجام می دهند:

column: این مقدار عناصر را در راستای یک ستون قرار میدهد.
row: این مقدار عناصر را در راستای یک سطر قرار می دهد.
row-reverse: این مقدار عناصر را در راستای یک سطر، اما از انتها قرار می دهد.
column-reverse: این مقدار عناصر را در راستای یک ستون، اما از انتها قرار می دهد.

.flex-container{
    width: 50rem;
    background-color: rgb(112, 112, 112);
    border-radius: 0.2rem;
    padding: 1rem;
    margin: 2rem auto;
    display: flex;
    flex-direction: row;
    flex-direction: row-reverse;
    flex-direction: column;
    flex-direction: column-reverse;
}

.flex-container{

width: 50rem;

background-color: rgb(112, 112, 112);

border-radius: 0.2rem;

padding: 1rem;

margin: 2rem auto;

display: flex;

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

}

دوستان عزیز دقت داشته باشید این جلسه از آموزش یک از جلسات آموزش طراحی قالب دیجی کالا با flexbox می باشد برای دریافت تمام جلسات دوره روی لینک کلیک فرمایید.

میانگین رتبه 5/5 تعداد رای : 2

آموزش flexbox مقدماتی جلسه ۱