Структура карточки:
.row-card
.card {
image
title
text
button
}
.card.....
Стили:
.row-card {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between; }
.card {
display: flex;
flex-direction: column;
align-items: flex-start; /**или center*/
justify-content: flex-start; /**это важно, чтобы все содержимое */
/**карточки выравнивалось одинаково*/
width: 150px; /**или какое по макету*/
padding: 10px; /**или что там по макету, если картинка должна быть во всю */
/**ширину без отступов от краев карточки,*/
/** то это свойство прописывается у title, text*/
border: 1px solid #000;
margin-right: 15px; /**чтобы карточки друг к другу не липли*/
margin-bottom: 15px; /**чтобы ряды карточке друг к другу не липли*/
}
.card .image {
width: 100%;
height: 150px; /**или то которое по макету*/
object-fit: cover;}
.card .title {
width: 100%;
text-align: center;
font-size: 20px; /**или сколько по макету*/
line-height: 25px;
margin-top: 10px;
margin-bottom: 10px;
height: 25px; /**присвоение четкой высоты - это залог одинаковых карточек*/
overflow: hidden; /**чтобы скрыть текст, который не влезает*/ }
.card .text {
width: 100%;
font-size: 16px; /**или сколько по макету*/
line-height: 18px;
margin-bottom: 10px;
height: 100px; /**присвоение четкой высоты - это залог одинаковых карточек*/
overflow: hidden; /**чтобы скрыть текст, который не влезает*/ }
.card .button {
height: 25px; /**присвоение четкой высоты - это залог одинаковых карточке*/
font-size: 14px;
line-height: 18px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-transform: uppercase;
border: 1px solid inherit;
background-color: #000;
width: 50%;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;}@media (max-width: 768px) {
body {
display: none;
}
}<div class="my-checkbox">
<input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox_input" required >
<div class="checked"></div> <!-- место для чекбокса-->
<div> <!-- еще один контейнер, чтобы можно было выровнять по центру --->
<label for="formAgreement" class="form_label">
<span>Я принимаю условия конфиденциальности</span>
</label>
</div>
</div>.form_label span {
font-size: 15px;
position: relative; /*придаем блоку свойство для создания возможности позиционирования в блоке*/
}
.checkbox_input {
position: absolute;
left: -999999px; /*прячем чекбокс за пределы видимости*/
}
label {
text-decoration: underline;
color: red;
cursor: pointer; /*чтобы все поняли, что сюда нужно нажимать*/
}
.checked { /*квадратик для галочки*/
width: 16px;
height: 16px;
border: 1px solid #aaa;
border-radius: 3px;
}
[type="checkbox"]:checked .checked { /*появление галочки при нажатии на label*/
content: '✔';
display: block;
font-size: 18px;
line-height: 0.8;
color: #989898;
transition: all .2s;
}
/* и собственно выравнивание */
.my-checkbox {
display: flex;
align-items: center;
}.parent-div {
display: flex;
}
.parent-div .first-line {
width: 100%;
height: [ровно по высоте строки с элементами]
}
.parent-div .second-line {
width: calc(100% + 100%);
height: [ровно по высоте элементов];
overflow: hidden;
overflow-x: scroll [или auto];
}span {
background: $body;
}