PDA

View Full Version : flex box


olampiad
یک شنبه 19 مرداد 1393, 08:42 صبح
سلام و خسته نباشید ب اساتید
استادمون واسمون ی پروژه ریسپانسیو داده و گفته توی اون باید از حتما از چیدمان flex box استفاده کنید.
اینم نمره دهی پروژه است که اگر استفاده نکنیم نمره نمیده.
برای پیاده‌سازی حالت واکنش‌گرا از چیدمان
flex box
استفاده شده است.
حالا خواستم ببینم چیدمان flex box چ نوع چیدمانی هستش؟
چ طور میتوان چنین چیدمانی داشت؟
ممنون بابت راهنمایی ها
Mori Bone
یک شنبه 19 مرداد 1393, 08:44 صبح
جستجو جستجو لطفا:چشمک:
designing with flexbox (https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=designing+with+flexbox&spell=1)
olampiad
یک شنبه 19 مرداد 1393, 08:57 صبح
سلام
من زبان انگلیسیم اصلا خوب نیست.
فارسی سرچ کردم
چیزی دستم رو نگرفت
حالا خواستم ببینم از اساتید کسی میتونه اینرو توضیح بده.
ممنون
Mori Bone
یک شنبه 19 مرداد 1393, 09:46 صبح
http://aparnet.ir/2219-flexbox-the-next-generation-of-css-layout
flex (http://srmweb.ir/education-articles/765-%D8%A2%DB%8C%D9%86%D8%AF%D9%87-%D9%84%DB%8C-%D8%A7%D9%88%D8%AA-%D8%AF%D8%B1-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%D9%88-%D8%AA%D9%88%D8%B6%DB%8C%D8%AD-%D8%AA%D8%AE%D8%B5%D8%B5%DB%8C-%D8%AF%D8%B3%D8%AA%D9%88%D8%B1%D9%87%D8%A7%DB%8C-Flexbox-(%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85).html)
http://fa.learnlayout.com/flexbox.html
http://noorportal.net/javan/itlearn/show-5901.aspx
http://fa.learnlayout.com/flexbox.html
olampiad
یک شنبه 19 مرداد 1393, 10:35 صبح
خسته نباشید ب دوست عزیز بابت پاسخ ها
ب این کد های من ی نگا بندازید.
من این هارو از ی سایتی بر داشته و نوشتم.
حالا خواستم ببینم پروژه flex من درست اجرا شده و کار میکنه.
من اطلاعات زیادی در مورد flex خوندم.
خواستم ببینم کاربرد flex در ریسپانسیو زیاده یا نه؟
کار اصلی flex چیه؟
من میخوام ی پروژه ریسپانسیو بنویسم که توش از flex استفاده شده باشه؟
حالا برای این کار فقط از پارامتر های display:flex استفاده کنم.
ممنون




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">

#all{
display:-moz-flex;
display:-webkit-flex;
display:flex;
margin:auto;
width:900px;
height:100px;
border:3px solid #FC0;
}

.one{
flex:initial;
-webkit-flex:initial;
-moz-flex:initial;
width:200px;
min-width:200px;
background:#6C6;
}
.none{
flex:none;
width:200px;
-webkit-flex:none;
-moz-flex:none;
background:#FC6;
}


.flex1 {
-webkit-flex: 1;
-moz-flex: 1;
flex: 1;
background:#CCC;

}
.flex2 {
-webkit-flex:2;
-moz-flex: 2;
flex:2;

background:#0F6;}


</style>
</head>
<body>


<div id="all">

<div class="one">
one
<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>

<div class="none">
none<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>

<div class="flex1">
flex1
<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>

<div class="flex2">
flex2
<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>


</div>

</body>
</html>
ab.ali
یک شنبه 19 مرداد 1393, 10:49 صبح
http://www.w3schools.com/cssref/css3_pr_flex.asp
فکر می کنم منظور استدتون این بوده که از پراپرتی flex در css استفاده بشه، توی همون لینک توضح داده ولی من براتون ترجمه می کنم:لبخند: ببینید flex یک property سی اس اس است که طول چند div، که اون چند تا دیو داخل یک div دیگه هستند رو بین سه تا شون تقسیم می کنه و برای همه طول برابر است، شاید استفاده اش در رسپانسیو اینه که در سایز های مختلف تمام طول div ها و عناصر می تونن برابر باشند.:چشمک: توی همون لینک یک چند تا مثال هم زده.
olampiad
یک شنبه 19 مرداد 1393, 11:26 صبح
سلام و خسته نباشید
تشکر بابت همه ی پاسخ ها
به این کد من ی نگا بندازید.
فرق بین display:flex و display:flexbox چیست؟
تو کد زیر چرا کد من در حالت تغییر حالت و کوچک تر شدن مرورگر کار نمیکند؟
مشکل از کجاست؟
ممنون




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<style type="text/css">

#all{

display:-moz-flex;
display:-webkit-flex;
display:flex;
margin:auto;
max-width:900px;
height:100px;
border:3px solid #FC0;
}




.one{
background:#6C6;
}
.none{
background:#FC6;
}


.flex1 {
background:#CCC;

}
.flex2 {
background:#0F6;}


@media only screen and (min-width:600px)and (max-width:900px){


.flex2 {
background:red;}

#all{
display:-moz-flexbox;
display:-webkit-flexbox;
display:flexbox;
margin:auto;
max-width:900px;
height:100px;
border:3px solid #FC0;
}



}



</style>
</head>
<body>


<div id="all">

<div class="one">
one
<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>

<div class="none">
none<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>

<div class="flex1">
flex1
<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>

<div class="flex2">
flex2
<br>
یک پرونده HTML که شامل متن معرفی، تصاویر و ویدیوی از کرج می باشد برای شما ایجاد شده است. وظیفه شما توسعه یک طراحی، چیدمان و استفاده از عناصر چندرسانه ای بر اساس دانش و خلاقیت خود می باشد. درهنگام طراحی، لطفاً جنبه هایی چون استایل، رنگ، نوع چیدمان، نوشته ها
</div>


</div>

</body>
</html>
ab.ali
یک شنبه 19 مرداد 1393, 11:48 صبح
این که کار می کنه.:متفکر: در تمام سایز ها، اون چهار div طولشون برابره.
olampiad
یک شنبه 19 مرداد 1393, 14:56 عصر
فرق بین display:flex و display:flexbox چیست؟
olampiad
یک شنبه 19 مرداد 1393, 16:47 عصر
سلام و خسته نباشید
به این کد من ی نگا بندازید.
تو اینجا می بینید که از چندین نوع display استفاده کرده است.
مزیت این کار چیست؟


display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Mori Bone
یک شنبه 19 مرداد 1393, 17:08 عصر
سلام و خسته نباشید
به این کد من ی نگا بندازید.
تو اینجا می بینید که از چندین نوع display استفاده کرده است.
مزیت این کار چیست؟


display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

برای اینه که توی همه ی نسخه های همهی مرورگر ها اجرا بشه
moz برای فایرفاکس و ...
ab.ali
یک شنبه 19 مرداد 1393, 17:30 عصر
راست می گن دیگه، اون ها پیشوند برای نمایش در مرورگر های مختلف است :
-moz- برای موزیلا
-webkit- برای کروم
-ms- برای IE
olampiad
یک شنبه 19 مرداد 1393, 18:10 عصر
سلام و خسته نباشید
منظورم box و flexbox و flex بود.
به این کد ها ی نگا بندازید.





@media all and (max-width: 600px){

@media only screen and (max-width: 600px){





فرق بین این دوتا چیه؟
کدوم بهتره؟
ممنون
olampiad
یک شنبه 19 مرداد 1393, 19:05 عصر
ب این کد من ی نگا بندازید.
اونرو یکبار تو سیستم خودتون اجرا کنید.
حالا با کوچک تر کردن مرورگر میبینید لوگو در زیر منو قرار میگیرد.
من چطور میتونم کاری کنم که با کوچک تر شدن صفحه لوگو در بالای منو قرار گیرد.
ممنون




<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">

header{
margin:auto;
max-width:1200px;
height:auto;
background:#6FF;
display:flex;
display:-webkit-flex;
flex-flow:row;
justify-content:space-around;
}

.logo{
float:right;
background:#999;
max-width:200px;
width:100%;
text-align:center;
}

nav{
max-width:910px;
width:100%;
background:#F96;
}

ul{
list-style:none;
max-width:80%;
margin:0px;
padding:0px;
width:100%;
display:flex;
display:-webkit-flex;
justify-content:flex-end;
flex-flow:row;
}

nav a:link{
display:block;
padding:7px;
}

@media all and (max-width:600px){

ul{
flex-flow:column;
}
nav a:link{
text-align:center;
}

header{
flex-direction:column;
}

nav{
-webkit-border:2;
border:2;

}

.logo{
-webkit-border:1;
border:1;
flex:1 auto;
}

}


</style>
</head>
<body>

<header>

<nav>
<ul>

<li><a href="">صفحه اصلی</a></li>
<li><a href="">گالری</a></li>
<li><a href="">درباره ما</a></li>
<li><a href="">تماس با ما</a></li>

</ul>
</nav>


<div class="logo"><img src="about-us.gif" width="60" height="60"></div>


</header>







</body>
</html>