Применение стилей к <span>внутри «display: flex»

Question

Хорошо, у меня возникла проблема, когда я хотел бы подчеркнуть текст и / или добавить дополнительные стили к или любому другому элементу, действительно находящемуся внутри flex-контейнера.У меня проблемы: центрирование не работает так, как я этого хочу.Добавление пролета создает беспорядок.Пожалуйста, прочтите примечания в коде.Как добавить дополнительные стили, сохранить гибкость и не создавать беспорядок?

#first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font: normal normal 30px/50px Times, serif;
}

<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div id="first" class="col">Your Business Online </br> &nbsp;&nbsp;View Our Services</div>

<!-- WTF? -->
<div id="first" class="col">Your Business Online </br> &nbsp;&nbsp;<span id="space">View Our Services</span></div>

?

Answer 1

Пожалуйста, смотрите ниже.Я задокументировал изменения в исходном коде.

#first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
flex-direction: column; /* change from row (default) */
font: normal normal 30px/50px Times, serif;
}

<!-- Put a span around 'Your Business Online' also. Remove line break and
non-breaking spaces -->
<div id="first" class="col"><span>Your Business Online</span><span id="space">View Our Services</span></div>

Answer 2

Предоставить flex-direction: column контейнеру.

Изменения в разметке:

• Создан .first класс вместо идентификатора для контейнера.
• Удален тег строки разрыва из второгоконтейнер.

Посмотрите, поможет ли это.

.first
{
height: 527px;
background: url(img/gbackground.jpg) no-repeat;
background-size: cover;
justify-content: center;
align-items: center;
display: flex;
font: normal normal 30px/50px Times, serif;
flex-direction: column;
}

<!-- I want to put a span around "View Our Services, but it ruins the flexbox,
I want the "View Our services" centered below the top 3 words: "Your Business Online" 
and with some space
on the left, I added some whitespace as a ghetto hack, but how can I add spans
so I can do extra cool things and not disrupt the flex? I also tried adding
a underline to the "-->
<div class="first" class="col">Your Business Online </br> &nbsp;&nbsp;View Our Services</div>

<!-- WTF? -->
<div class="first" class="col">Your Business Online  &nbsp;&nbsp;<span id="space">View Our Services</span></div>