CSS: выравнивание элементов в гибком макете

Question

Я хочу, чтобы стрелка вниз находилась в центре нижней части страницы. Я пытаюсь добиться этого с помощью гибкого макета. но пока не могу этого сделать. Может кто-нибудь, пожалуйста, помогите мне? Ниже мой css / html

.flex-description-container {
  display: flex;
  flex-flow: row wrap;
  align-items: center
}

.flex-item-descriptionText {
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 4em;
  text-align: center;
  flex: 1;
}

.flex-item-descriptionImage {
  padding: 10px;
  color: white;
  flex: 1;
}

.flex-item-next {
  flex: 1 100%;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
}

App.jsx>

<Parallax.Layer
                    offset={0} speed={0}
                    onClick={() => this.parallax.scrollTo(1)}>
                    <div class="flex-description-container ">
                        <div class="flex-item-descriptionText">Text </div>
                        <div class="flex-item-descriptionImage">
                            <img src={url('desk')} style={{ width: '50%' }} />
                        </div>
                        <div class="flex-item-next">
                            <img src={url('down')} style={{ width: '5%' }} />
                        </div>
                    </div>
                </Parallax.Layer>

PS: я использую этот реагирующий компонент

Answer 1

для этого введите этот код в .flex-item-next:

.flex-item-next {

  display: flex;

  flex: 1 100%;
  align-items: center;
  align-self: flex-end;
  justify-content: center;

}

Answer 2

Просто добавьте display:flex к .flex-item-next.

.flex-item-next {
  flex: 1 100%;
  display: flex;
  align-items: center;
  align-self: flex-end;
  justify-content: center;
}

См. рабочая реализация .