ورود عضویت

ALVIN

4 سال پیش توسط ALVIN مطرح شد

9 پاسخ

layout وب سایت با flex

سلام وقت بخیر ببخشید چطور میشه چند تا باکس که در یک المنت پدر هستند با استفاده از flex کنار هم باشند لطفا کمک کنید🌹🌹

ثبت پرسش جدید

اسماعیل محمدزاده

تخصص : عاشق یادگیری طراحی و برنامه نو...

@engineer.muhmmadzade 4 سال پیش مطرح شد

سلام
به المنت پدر display: flex را بده و اگر خواستی برای المنت ها width پایه در نظر بگیری با flex-basis می تونی اوکیش کنی فقط یادت باشه flex-basis را به فرزندها بدی

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

سلام
سوال و جواب در واقع یک چیز شدش. در واقع انگار سوالتون اینه که چطور میشه از خصوصیت flex استفاده کرد.
پاسخ:
https://www.w3schools.com/css/css3_flexbox.asp
https://roocket.ir/series/full-training-flexbox

ارسال پاسخ

محمدحسن یگانه

تخصص : Full-Stack Web Developer Freel...

@mhyeganeh 4 سال پیش مطرح شد

صرف اینکه به پدرش display: flex بدید آیتم ها خودشون کنار هم قرار می‌گیرند.

یک سری به لینک زیر بزنید. خیلی خلاصه ولی کامل همراه با شکل flexbox رو توضیح داده و کمک کننده هست:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

کدهاتون رو به درستی قرار دهید.

ارسال پاسخ

ALVIN

تخصص : برنامه نویس

@ALVIIN 4 سال پیش مطرح شد

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./reset.css">
  <link rel="stylesheet" href="./style of flex.css">
  <title>PhotoWeb</title>
</head>
<body>
  <div class="header">
    <div class="navbar1">
    <div class="small-nav">
      <a href="#" class="item-nav-small">About us</a>
      <a href="#" class="item-nav-small">Contact us</a>
      <a href="#" class="item-nav-small">Telegram Channel</a>
      <a href="#" class="item-nav-small">Instagram</a>
      <a href="./sign.html" class="item-nav-small">Sign</a>
      </div>
     <div class="logo">
      <a href="#" class="item-nav-small logo">PhotoWeb</a>
    </div>
  </div>
  <div class="main-header">
    <h2>PhotoWeb</h2>
    <span class="main-header-span">PhotoWeb is media to show you world from Camera. </span>
  </div>
  <div class="navbar2">
    <li>
      <ul><a href="#" class="item-navbar2">Home</a></ul>
      <ul><a href="#" class="item-navbar2">Photos</a></ul>
      <ul><a href="#" class="item-navbar2">Photoghraghy</a></ul>
      <ul><a href="#" class="item-navbar2">Camera</a></ul>
    </li>
  </div>
  </div>
  <div class="section">
    <div class="row1">
      <a href="#"><div class="item-section wallpaper">Wallpaper</div></a>
      <a href="#"><div class="item-section nature">Nature</div></a>
      <a href="#"><div class="item-section fashion">Fashion</div></a>
    </div>
    <div class="row2"></div>
  </div>
</body>
</html>
 
html {
  font-size: 100%;}
 
.navbar1 {
  display: flex;
  justify-content: space-between;
  border: 1px solid rgba(90, 90,90,.2);
  padding: .8rem;
  margin: .3rem;}
 
.item-nav-small {
  padding: .5rem;
  color: rgba(90, 90,90,.6);
  font-family: cursive;
  font-weight: 100;
  text-decoration: none;
  font-size: 1rem;}
 
.small-nav .item-nav-small {
  margin: .3rem 0 .3rem .5rem ;
  padding: .7rem;}
 
.item-nav-small:hover {
  background-color: rgba(127, 140, 141,.4);
  color: white;
  border: none;
  border-radius: .3rem;}
 
.logo {
  font-family: cursive;}
 
 div.main-header {
  background: linear-gradient(to right , rgba(90, 117, 133, 0.5) ,rgba(43, 50, 178,.5)) ,  url(./jon-tyson-P2aOvMMUJnY-unsplash.jpg)  no-repeat border-box 0 40%/cover ;
  height: 70vh;
  margin: .3rem;
  position: relative ;}
 
div.main-header h2 {
  font-size: 3rem;
  font-family: 'Times New Roman', Times, serif;
  padding-left: 2.5rem;
  padding-top: 2rem;}
 
.main-header-span {
  font-size: 1.2rem;
  font-family:'Times New Roman', Times, serif ;
  padding-left: 2.5rem;
  position: relative;
  top: 2rem;}
 
 .navbar2 {
   margin: .5rem;}
 
.navbar2 li {
  display: flex;
  padding: .5rem ;
  border: 1px solid rgb(0, 0, 0) ;
  background: radial-gradient(circle , #7a7a7a ,#9e9e9e) ;}
 
  .navbar2 a {
    color: black;
    text-decoration: none ;
    margin-left: 1rem ;
    margin-right: .5rem;
    font-size: 1.5rem;
    font-family: 'Times New Roman', Times, serif;}
 
  .navbar2 a:hover {
    background-color: rgb(36, 41, 41);
    color: white;
    border-radius: .1rem;}
 
  .section {
    display: flex;}
 
    .item-section {
    width:33.33%  ;
    border: 1px solid black;
    height: 10rem; 
    display: flex;}

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

ایرادات شما بیش از حد هستش. مشخص هستش که درست یاد نگرفتید.
بهترین کار اینه که یک فیلم آموزشی ببینید تا اصول کار رو یاد بگیرید.
https://roocket.ir/series/full-training-flexbox

ارسال پاسخ

میلاد-م

تخصص : توسعه‌دهنده رابط کاربری - Fron...

@milad 4 سال پیش مطرح شد

یک مثال نمونه ی ساده از کار با خصوصت flex:

 <!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
 
.flex-parent {
  display: flex;
  background-color: DodgerBlue;
}
 
.flex-child {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
  flex-basis: 33.33%;
}
</style>
</head>
<body>
 
<div class="flex-parent">
  <div class="flex-child">1</div>
  <div class="flex-child">2</div>
  <div class="flex-child">3</div>  
</div>
 
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
 
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
 
</body>
</html>

ارسال پاسخ

ALVIN

تخصص : برنامه نویس

@ALVIIN 4 سال پیش مطرح شد

ممنون که کمک کردید حتما دوباره نگاه می کنم ممنون از شما

ارسال پاسخ

mohammad

@mamalida1375 4 سال پیش مطرح شد

-1

برای کنار هم قرار دادن هم میشه از فلکس استفاده کرد هم از گرید
display:flex
justify content
flex direction
align content align item
و.. میتونن کمک کننده باشن ولی نوشتن display: flex الزامیه
البته اگه با گرید هم کار کنی بد نی و اموزشش هم زیاده همه جا

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

محبوب‌ترین آموزش‌ها

layout وب سایت با flex

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./reset.css">
	<link rel="stylesheet" href="./style of flex.css">
	<title>PhotoWeb</title>
	</head>
	<body>
	<div class="header">
	<div class="navbar1">
	<div class="small-nav">
	<a href="#" class="item-nav-small">About us</a>
	<a href="#" class="item-nav-small">Contact us</a>
	<a href="#" class="item-nav-small">Telegram Channel</a>
	<a href="#" class="item-nav-small">Instagram</a>
	<a href="./sign.html" class="item-nav-small">Sign</a>
	</div>
	<div class="logo">
	<a href="#" class="item-nav-small logo">PhotoWeb</a>
	</div>
	</div>
	<div class="main-header">
	<h2>PhotoWeb</h2>
	<span class="main-header-span">PhotoWeb is media to show you world from Camera. </span>
	</div>
	<div class="navbar2">
	<li>
	<ul><a href="#" class="item-navbar2">Home</a></ul>
	<ul><a href="#" class="item-navbar2">Photos</a></ul>
	<ul><a href="#" class="item-navbar2">Photoghraghy</a></ul>
	<ul><a href="#" class="item-navbar2">Camera</a></ul>
	</li>
	</div>
	</div>
	<div class="section">
	<div class="row1">
	<a href="#"><div class="item-section wallpaper">Wallpaper</div></a>
	<a href="#"><div class="item-section nature">Nature</div></a>
	<a href="#"><div class="item-section fashion">Fashion</div></a>
	</div>
	<div class="row2"></div>
	</div>
	</body>
	</html>

	html {
	font-size: 100%;}

	.navbar1 {
	display: flex;
	justify-content: space-between;
	border: 1px solid rgba(90, 90,90,.2);
	padding: .8rem;
	margin: .3rem;}

	.item-nav-small {
	padding: .5rem;
	color: rgba(90, 90,90,.6);
	font-family: cursive;
	font-weight: 100;
	text-decoration: none;
	font-size: 1rem;}

	.small-nav .item-nav-small {
	margin: .3rem 0 .3rem .5rem ;
	padding: .7rem;}

	.item-nav-small:hover {
	background-color: rgba(127, 140, 141,.4);
	color: white;
	border: none;
	border-radius: .3rem;}

	.logo {
	font-family: cursive;}

	div.main-header {
	background: linear-gradient(to right , rgba(90, 117, 133, 0.5) ,rgba(43, 50, 178,.5)) , url(./jon-tyson-P2aOvMMUJnY-unsplash.jpg) no-repeat border-box 0 40%/cover ;
	height: 70vh;
	margin: .3rem;
	position: relative ;}

	div.main-header h2 {
	font-size: 3rem;
	font-family: 'Times New Roman', Times, serif;
	padding-left: 2.5rem;
	padding-top: 2rem;}

	.main-header-span {
	font-size: 1.2rem;
	font-family:'Times New Roman', Times, serif ;
	padding-left: 2.5rem;
	position: relative;
	top: 2rem;}

	.navbar2 {
	margin: .5rem;}

	.navbar2 li {
	display: flex;
	padding: .5rem ;
	border: 1px solid rgb(0, 0, 0) ;
	background: radial-gradient(circle , #7a7a7a ,#9e9e9e) ;}

	.navbar2 a {
	color: black;
	text-decoration: none ;
	margin-left: 1rem ;
	margin-right: .5rem;
	font-size: 1.5rem;
	font-family: 'Times New Roman', Times, serif;}

	.navbar2 a:hover {
	background-color: rgb(36, 41, 41);
	color: white;
	border-radius: .1rem;}

	.section {
	display: flex;}

	.item-section {
	width:33.33% ;
	border: 1px solid black;
	height: 10rem;
	display: flex;}

	<!DOCTYPE html>
	<html>
	<head>
	<style>
	* {
	box-sizing: border-box;
	}

	.flex-parent {
	display: flex;
	background-color: DodgerBlue;
	}

	.flex-child {
	background-color: #f1f1f1;
	margin: 10px;
	padding: 20px;
	font-size: 30px;
	flex-basis: 33.33%;
	}
	</style>
	</head>
	<body>

	<div class="flex-parent">
	<div class="flex-child">1</div>
	<div class="flex-child">2</div>
	<div class="flex-child">3</div>
	</div>

	<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

	<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

	</body>
	</html>