Блог

Главная - Вопросы по программированию - Как обеспечить равные поля во всех направлениях для flexbox?

Как обеспечить равные поля во всех направлениях для flexbox?

#html #css #reactjs

Вопрос:

Я работаю над проектом Reactjs . У меня есть div (#предстоящие события) отображения:flex . Я хочу дать ему равные поля во всех направлениях . Поэтому я применил margin:auto , но, однако, это не дает маржи сверху и снизу . Это дает преимущество только левой и правой стороне . Вот мой код :- UpCommingEvent.js :-

 import React from "react";
import "./styles/upcommingevent.css"
function UpCommingEvent() {
  return (
    <div id="up-coming-events">
      <div id="event-thumbnail"></div>
      <p>hello upComming eventts here</p>
    </div>
  );
}

export default UpCommingEvent;

предстоящее событие.css:-

 #up-coming-events {
  width: 88rem;
  margin: auto; /*Not giving margins in to top and bottom */
  height: 35rem;
  border: 2px solid white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2.875rem;
}
#event-thumbnail {
  width: 38.7rem;
  height: 23.6rem;
  border-radius: 30px;
  background-color: grey;
}

Я думаю жестко закодировать верхние и нижние поля , равные левым и правым полям , но я думаю, что будет более разумный и эффективный способ сделать это .

Может ли кто-нибудь сказать мне, что это за более умный и эффективный способ ?

Спасибо

Ответ №1:

Вы можете явно задать маржу:

 #up-coming-events {
  width: 88rem;
  margin: 1rem; 
  height: 35rem;
  border: 2px solid white;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 2.875rem;
}
#event-thumbnail {
  width: 38.7rem;
  height: 23.6rem;
  border-radius: 30px;
  background-color: grey;
}

и это один из рекомендуемых способов

Комментарии:

1. Я. Я тоже думаю о том же , но я подумал , что давайте проверим в Интернете, есть ли лучший способ сделать это .

2. @Ришабхрагвендра это один из рекомендуемых способов

3. @RishabhRaghwendra Не стесняйтесь задавать любые вопросы. Если ответ помог вам, вы можете отметить его как ответ, чтобы упростить будущий поиск других пользователей. Как работает принятие ответа.

4. вы также можете поднять мой вопрос , если считаете, что на мой вопрос стоит ответить

5. @RishabhRaghwendra Конечно, он хорошо отформатирован! Не стесняйтесь выбирать ответ, чтобы отметить его как ответ, чтобы упростить будущий поиск других пользователей.

Ответ №2:

Функция автоматического поля работает только для свойств бокового поля. Если вы хотите установить одинаковую маржу, вам следует использовать относительную маржу, например, значение%.

Комментарии:

1. Что вы подразумеваете под свойствами боковых полей ?

Ответ №3:

Если вы используете flex box, то вы можете совершенно безболезненно выровнять что угодно (по вертикали или горизонтали) с помощью свойств выровнять элементы, выровнять себя и выровнять содержимое. Фил Уолтон отлично справляется с описанием решения:

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Комментарии:

1. Но это говорит нам о том, как центрировать элементы flexbox, а не flexbox . Я хочу центрировать раздел «#предстоящие события».

2. Затем вы должны сделать родительский элемент #предстоящие события гибким полем и считать дочерний вложенным элементом. Установите родительский элемент в положение «отображение: гибкий», и предстоящие события должны использовать свойства выравнивания элементов, выравнивания и выравнивания содержимого.

3. Я думал , что будет какой-нибудь хак, который сможет это сделать, не создавая родительский элемент для #предстоящих событий, но в любом случае . Спасибо, приятель

Метки: