#css
#css
Вопрос:
Я надеюсь, что я ищу какое-то решение flexbox , чтобы получить результат, подобный этому изображению:
В настоящее время я не знаю, как сделать так, чтобы у всех моих containers был uniform space .
это изображение показывает мою проблему, spaces в середине каждого containers отличается от остальной части spaces
Как я могу это исправить и что я делаю не так?
.container_square {
height: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.container_card {
border: 1px solid black;
height: 98%;
width: 98%;
}
.h-100{
height:100% !important;
}
body,html{
height:100%;
width:100%;
border:1px solid red;
}
* {
box-sizing: border-box !important;
} <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row no-gutters h-100 overflow-auto">
<div class="col-6 container_square">
<div class="container_card">
1
</div>
</div>
<div class="col-6 container_square">
<div class="container_card">
2
</div>
</div>
<div class="col-6 container_square">
<div class="container_card">
3
</div>
</div>
<div class="col-6 container_square">
<div class="container_card">
4
</div>
</div>
</div> Комментарии:
1. Похоже, вы пытаетесь сделать с помощью flex то, что проще сделать с grid, по любой причине, по которой вы хотите, чтобы это был flex, а не grid (вы даже использовали
gridслово в названии), у вас естьgrid-gapсвойство для сеток, чтобы установить это пространство.
Ответ №1:
Как упоминал @arieljuod, CSS Grid — ваш друг здесь. Это позволяет выполнять все с очень небольшим количеством css.
Я также использую переменную css, чтобы сделать поле легко регулируемым в одном месте и сохранить все правильно.
Вот некоторая информация о css grid.
Основы того, что используется в этом решении, таковы:
2 строки и 2 столбца, каждый с 1fr размером. Значение fr — дробная единица. Сетка разделит область сетки на дробные единицы после учета всех не дробных единиц (т. Е. px, em, rem). 1 в этом — это соотношение, поэтому 1fr 1fr разбивает область пополам. 1fr 2fr первый должен быть равен 1/3, а второй — 2/3. Это позволяет нам использовать более сложные пробелы без необходимости использовать странные доли или проценты. Хотя это немного упрощено для этого.
grid-gap: 5px; gap: 5px; есть два способа сказать, что промежуток между дорожками в сетке должен иметь размер 5px . gap является ли более новый способ, который позволяет использовать его и в flex-box, но, к сожалению, пока не реализован в Safari. Именно поэтому я включил более старый grid-gap , чтобы он работал в Safari.
Последнее, что представляет интерес, это переменные CSS. Это позволяет нам настраивать переменные в чистом CSS и выполнять манипуляции с их использованием. Вы можете определить их в любом селекторе, и они каскадируются вниз. Обычное место для их определения — in :root{} , но это более локально, поэтому я определил его там, где это было необходимо.
Вы можете получить доступ к переменной CSS, используя var(--variable-name) которую, вы сможете использовать ее в качестве значения в большинстве CSS. Вы также можете указать значение по умолчанию, если переменная еще не определена : var(--variable-name,10px) .
Наслаждайтесь!
.spaced-grid {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
/* You can change margin to whatever you want it to be */
--margin: 20px;
height: calc(100% - ( 2 * var(--margin))) !important;
width: calc(100% - ( 2 * var(--margin))) !important;
margin: var(--margin) !important;
grid-gap: var(--margin);
gap: var(--margin);
}
.container_card {
border: 1px solid black;
}
body,
html {
height: 100%;
width: 100%;
border: 1px solid red;
margin: none;
}
* {
box-sizing: border-box !important;
} <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="spaced-grid">
<div class="container_card">
1
</div>
<div class="container_card">
2
</div>
<div class="container_card">
3
</div>
<div class="container_card">
4
</div>
</div> Комментарии:
1. Спасибо! Я думаю, мне следует изучить CSS grid, между тем, не могли бы вы объяснить мне, что такое
fr2. @yavg, я добавил много объяснений CSS, который использует это решение, и ссылки для дальнейшего чтения.
Ответ №2:
РЕДАКТИРОВАТЬ: я нашел это решение, используя просто display:flex (так что просто flexbox) (источник https://codepen.io/mogpt/pen/ebXdzg )
html, body {
height: 100%;
margin: 0;
width: 1000px; /*width can be change*/
}
.grid2x2 {
min-height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
border: solid 5px red;
margin: 10px;
}
.grid2x2 > div {
display: flex;
flex-basis: calc(50% - 30px); /*play with - XXpx if problem*/
justify-content: center;
flex-direction: column;
}
.grid2x2 > div > div {
display: flex;
justify-content: center;
flex-direction: row;
}
.box1 { background-color: red;
margin: 20px 10px 10px 20px;}
.box2 { background-color: orange;
margin: 20px 20px 10px 10px;}
.box3 { background-color: purple;
margin: 10px 10px 20px 20px;}
.box4 { background-color: grey;
margin: 10px 20px 20px 10px;} <div class="grid2x2">
<div class="box box1"><div>one</div></div>
<div class="box box2"><div>two</div></div>
<div class="box box3"><div>three</div></div>
<div class="box box4"><div>four</div></div>
</div> Комментарии:
1. Спасибо! в первом фрагменте не все пробелы равны, а второе решение немного отличается в зависимости от моей структуры
2. Мое РЕДАКТИРОВАНИЕ больше того, что вы хотите?
3. спасибо за ваш ответ, но пространство в середине не такое, как на других сторонах
4. Действительно, я этого не заметил. Обычно теперь это исправляется. Объяснение: в .grid2x2> div вы определяете ширину, которая будет приниматься минус XX пикселей. Затем эти пиксели используются для создания вашего поля (например, на внешней стороне 20 пикселей, а между 2 разделениями только 10 пикселей, потому что 2 раза по 10 пикселей дают поле в 20 пикселей).