layout وب سایت با flex
سلام وقت بخیر ببخشید چطور میشه چند تا باکس که در یک المنت پدر هستند با استفاده از flex کنار هم باشند لطفا کمک کنید🌹🌹
سلام
به المنت پدر display: flex را بده و اگر خواستی برای المنت ها width پایه در نظر بگیری با flex-basis می تونی اوکیش کنی فقط یادت باشه flex-basis را به فرزندها بدی
سلام
سوال و جواب در واقع یک چیز شدش. در واقع انگار سوالتون اینه که چطور میشه از خصوصیت flex استفاده کرد.
پاسخ:
https://www.w3schools.com/css/css3_flexbox.asp
https://roocket.ir/series/full-training-flexbox
صرف اینکه به پدرش display: flex بدید آیتم ها خودشون کنار هم قرار می‌گیرند.
یک سری به لینک زیر بزنید. خیلی خلاصه ولی کامل همراه با شکل flexbox رو توضیح داده و کمک کننده هست:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
<!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="https://roocket.ir/./reset.css">
<link rel="stylesheet" href="https://roocket.ir/./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="https://roocket.ir/./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;}
ایرادات شما بیش از حد هستش. مشخص هستش که درست یاد نگرفتید.
بهترین کار اینه که یک فیلم آموزشی ببینید تا اصول کار رو یاد بگیرید.
https://roocket.ir/series/full-training-flexbox
یک مثال نمونه ی ساده از کار با خصوصت 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>
برای کنار هم قرار دادن هم میشه از فلکس استفاده کرد هم از گرید
display:flex
justify content
flex direction
align content align item
و.. میتونن کمک کننده باشن ولی نوشتن display: flex الزامیه
البته اگه با گرید هم کار کنی بد نی و اموزشش هم زیاده همه جا