همین امروز، بهترین فرصت برای شروع یادگیری برنامه نویسی است ... 💯
۰ ثانیه
۰ دقیقه
۰ ساعت
۱ سحر پاشائی
اسکرول افقی!!!
جامعه Html & CSS ایجاد شده در ۲۷ مرداد ۱۴۰۲

سلام. وقت بخیر

1- چرا صفحه من ریسپانسیو نشده و اسکرول افقی می‌خوره؟!

2- اگه تعداد تصاویر فرد باشه، آخریه هم سایزش با بقیه متفاوت می‌شه هم میوفته وسط جای گوشه، حتی سایزش کوچیک باشه هم میوفته وسط (تصویر گوزن)

https://codepen.io/Sahar_Pashaei/pen/eYbYgWZ

سلام،

1- چون برای container مقدار width ثابت تعیین کرده اید، width را تبدیل به max-width کنید:

.container {
  max-width: 1200px;
  width: 100%;
  margin: 10px auto;
  display: flex;
}

2- مقدار justify-content و flex(main div) تغییر میکند:

main {
  flex: 75%;
  display: flex;
  justify-content: flex-start; /* change to flex-start */
  flex-wrap: wrap;
}
main div {
  flex: 0 0 calc(50% - 32px);
  padding: 0 16px;
}

لینک دمو

بهترین پاسخ
محسن موحد ۲۷ مرداد ۱۴۰۲، ۲۱:۲۷