مشکل flexbox
سلام دوستان وقتی در فلکس باکس یک باکس کلی در نظر می گیری و 4 تا باکس درونش و برای باکس های درونش عرض 300 پیکسل می دی وقتی که کوچیکش می کنیم مروگر رو اون 300 پیکسل می شکنه و به باکس هاس درون باکس کلی تو هم جمع می شن اما اگر disply اش رو inline-block در نظر بگیری زیر هم در اون اندازه میفتن حالا من چطوری disply خودم رو flex در نظرم بگیرم که اگه از لندازه باکس جزئی کوچیکتر شد بیفته پایین کد خود را اینجا وارد کنید
براتون کد هم می نویسیم
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="continer">
<div class="cont">
<div class="items">items1</div>
<div class="items">items2</div>
<div class="items">items3</div>
<div class="items">items4</div>
</div>
</div>
</body>
</html>
و css
.continer{
display: flex;
}
.cont{
width: 100%;
height: 500px;
display: flex;
background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
justify-content: center;
flex-direction: row-reverse;
align-items: center;
}
.items{
width: 500px;
height: 300px;
background-color: fff;
margin: 3px;
}
لطفا کمکم کنین مرسی
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
درود
@alirezatahriri
بله اما می خوام از flexbox استفاده کنم به خاطر align-item و justfy-content
شما اگر میخواهید که در هر اندازه صفحه وبتون یک استایل خاص داشته باشه داخل فایل css از کد زیر استفاده کنید و برای اون اندازه از صفحه هم کدش رو بنویسید مثلا من گفتم در 900px رنگ سایت قرمز بشه.
کد Css:
.continer{
display: flex;
}
.cont{
width: 100%;
height: 500px;
display: flex;
background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
justify-content: center;
flex-direction: row-reverse;
align-items: center;
}
.items{
width: 500px;
height: 300px;
background-color: fff;
margin: 3px;
}
@media screen and (max-width: 900px) {
body{
background-color: red;
}
}درود
@alirezatahriri
دوست عزیز فکر کنم منظورم رو متوجه نشدین می می گم وقتی که سایز اون باکس ها از 300 پیکسل کم شد عرضش کم نشه و بیفته زیر
سلام @alizadevesal الان فهمیدم کد رو درستش کردم:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.continer{
display: flex;
}
.cont{
width: 100%;
height: 500px;
display: flex;
background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
justify-content: center;
flex-direction: row-reverse;
align-items: center;
}
.items{
width: 500px;
height: 300px;
background-color: fff;
margin: 3px;
}
@media screen and (max-width: 300px) {
.continer{
display: flex;
}
.cont{
width: 95%;
height: 500px;
display: grid;
background: linear-gradient(315deg, 2e2e2e 20%, blue 80%);
justify-content: center;
flex-direction: row-reverse;
align-items: center;
margin: auto;
}
.items{
width: 290px;
height: 300px;
background-color: fff;
margin: 3px;
display: grid;
justify-content: center;
align-items: center;
}
}
</style>
</head>
<body>
<div class="continer">
<div class="cont">
<div class="items">items1</div>
<div class="items">items2</div>
<div class="items">items3</div>
<div class="items">items4</div>
</div>
</div>
</body>
</html>از 300px کوچکتر اندازه فلکس باکس کم نمیشه و زیر هم قرار میگیرند.