#html #css #flexbox #css-grid
#HTML #css #flexbox #css-grid
Вопрос:
Итак, я создаю макет, в котором у меня есть
<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>
Я хочу, чтобы отступ составлял четверть ширины и автоматически переносился ниже основного, как только он достигает определенного размера, а основной занимал всю ширину. Я знаю, что могу сделать это с помощью медиа-запросов, но люди говорят, что это можно сделать с помощью grid и без медиа-запросов. Я часами экспериментировал и исследовал и не могу с этим разобраться. Есть идеи? Если это невозможно сделать, то это нормально, и я могу попробовать это с помощью flexbox или медиа-запросов.
Реквизит заранее.
Ответ №1:
Приведенный ниже код, при достижении div определенного размера, автоматически отключается. Если вы хотите удалить div определенного размера, мы должны использовать только media query.
#structure-content {
margin-bottom: 1em;
background: #fff;
color: #fff;
padding: 1.5em 1em;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
main {
background: green;
}
aside {
background: blue;
}
main,
aside {
flex: 1 0 15em;
margin-left: 0.5em;
margin-right: 0.5em;
}
<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>
Комментарии:
1. Спасибо за ответ. Как я упоминал выше, мне нужно, чтобы столбцы были разной ширины. Однако ваш код натолкнул меня на некоторые идеи. Приветствия.
Ответ №2:
С помощью CSS Grid вы можете сделать так, чтобы main
и aside
занимали половину доступной ширины и автоматически переносить, когда любой из элементов сетки достигает минимальной ширины, используя grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
— см. демонстрацию ниже:
body {
margin: 0;
}
#structure-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
main {
background: aliceblue;
}
aside {
background: cadetblue;
}
<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>
Решение
Я бы сказал, что с CSS Grid вы можете работать с медиа-запросами. В любом случае, flexbox здесь будет хорошо работать:
- используйте flexbox для переноса
- сохраните
min-width
для каждого изaside
иmain
и добавьте,flex: 1
чтобы увеличить ее до оставшегося места, если оно доступно — смотрите демонстрацию ниже:
body {
margin: 0;
}
#structure-content {
display: flex;
flex-wrap: wrap; /* a wrapping flexbox */
}
main {
background: aliceblue;
min-width: 75vw; /* forces aside to take one-fourth space */
flex: 1;
}
aside {
background: cadetblue;
min-width: 250px; /* minimum width of aside */
flex: 1;
}
<div id="structure-content">
<main>content goes here</main>
<aside>aside content</aside>
</div>
Комментарии:
1. Спасибо за ваш код. Похоже, что я почти смог заставить все это работать, и, вероятно, я доработаю это, немного повозившись. Как бы то ни было, ваш фрагмент кода подтвердил несколько мыслей, которые у меня возникли при том подходе, который я использовал. Ценю ваше время и понимание.