Блог

Главная - Вопросы по программированию - Почему последний элемент в моем столбце flex не выровнен?

Почему последний элемент в моем столбце flex не выровнен?

#html #css #reactjs #flexbox

#HTML #css #reactjs #flexbox

Вопрос:

Вот как это выглядит:https://gyazo.com/77de215669cf2d9cd3ca35a0e064c7bf

Я не уверен, почему последняя коробка не в центре. Это мой код css:

  .recipe1{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap; 
}

.recipe2{
    border-radius: 10px;
    box-shadow: 0px 5px 20px rgb(71,71,71);
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: white;
    align-items: center;
    min-width: 50%;
}

HTML:

 <div className="recipe1">
        <div className="recipe2">
            <h1 className="display-4 p-3">{title}</h1>
            <ul> {/*Ingredients is an array of objects, so need to iterate through it with map to display*/}
                {ingredients.map(ingredient => (
                    <li className="lead">{ingredient.text}</li>
                ))}
            </ul>
            <p>Calories: {Math.floor(calories)}g</p>
            <img className={style.image} src={image} alt="Cannot display :("></img>
        </div>
    </div>

Я использую react и bootstrap, поэтому там есть еще кое-что, что выглядит по-другому.

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

1. Ваши divs не сбалансированы. где recipe1?

2. пожалуйста, опубликуйте весь код (html css), который у вас есть, для тегов закрытия div, а затем открывающих теги. затрудняет воспроизведение ошибки, если вы получили только части кода, а затем больше закрывающих, чем открывающих тегов.

3. Извините, кажется, я пропустил первый тег

4. Обратите ваше внимание на 3-ю строку снизу (HTML), у вас там есть тег </img> . Удалите этот тег, он не существует. <img> не нуждается в закрывающем теге. Может привести к путанице с другими тегами в дальнейшем.

5. У вас он где-нибудь размещен, чтобы мы могли его проверить… Я ничего не могу понять из фрагмента кода:(