WedX - журнал о программировании и компьютерных науках

Странная обертка текста и элемента привязки в контейнере flex

У меня есть простой блок текста, разделяющий контейнер display: flex с тегом <a>.

К сожалению, упаковка немного странная, как будто «истинная» ширина тега <a> не обрабатывается как таковая или как будто она имеет ширину 0 (судя по тому, как она расположена).

Есть ли какие-то стили, которые я могу применить к тегам <a>, чтобы сделать их более «текстовыми»?

введите здесь описание изображения

введите здесь описание изображения

введите здесь описание изображения

JSFiddle

body {
  font-size: 32px;
}
body > .container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
body > .container > .foot {
  flex: 1 0 100%;
  background-color: grey;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
body > .container > .foot > .content {
  flex: 1 0 70%;
  width: 50%;
  height: 350px;
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: center;
  text-align: center;
}
<div class='container'>
  <div class='foot'>
    <div class='content'>
      We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='https://status.mywebsite.com'>https://status.mywebsite.com </a>&nbsp; for updates.
    </div>
  </div>
</div>

12.12.2016

Ответы:


1

Отвечать

У вас есть text-align: center, который применяется к тексту, но не к элементу привязки.

У вас есть justify-content: flex-start, который применяется к элементу привязки, но не к тексту.

Все, что вам нужно, это переключиться на justify-content: center.

пересмотренная скрипта

body {
  font-size: 32px;
}
body > .container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
}
body > .container > .foot {
  flex: 1 0 100%;
  background-color: grey;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
body > .container > .foot > .content {
  flex: 1 0 70%;
  width: 50%;
  height: 350px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;  /* ADJUSTED */
  align-items: center;
  align-content: center;
  text-align: center;
}
<div class='container'>
  <div class='foot'>
    <div class='content'>
      We'll be back up shortly. We are undergoing a scheduled maintenance. Apologies for the inconvenience. Check <a href='https://status.mywebsite.com'>https://status.mywebsite.com </a>&nbsp; for updates.
    </div>
  </div>
</div>


Объяснение

Вы писали:

У меня есть простой блок текста, разделяющий контейнер display: flex с тегом <a>.

Ну, ваш блок текста не так прост, как вы думаете.

Вы имеете дело не с одной строкой.

На самом деле у вас есть гибкий контейнер с тремя гибкими элементами:

  • Анонимный гибкий элемент, оборачивающий текст перед элементом привязки
  • Якорный элемент
  • Анонимный гибкий элемент, оборачивающий текст после элемента привязки.

Из спецификации:

4. Flex-элементы

Каждый дочерний элемент flex-контейнера в потоке становится flex-элементом, и каждый непрерывный фрагмент текста, непосредственно содержащийся внутри flex-контейнера, оборачивается анонимным flex-элементом.

Поведение, которое вы видите, представляет собой упаковку трех гибких элементов.

Сам якорный текст не будет переноситься, потому что он эквивалентен одному слову. Но если вы добавите пробелы и текст в якорь, он будет переноситься, как и все остальное.

Также см. этот пост:

13.12.2016
Новые материалы

Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..

Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..


Для любых предложений по сайту: [email protected]