Проблемы с выравниванием текста в div Flexbox
Я пытаюсь преобразовать свое резюме в HTML и столкнулся с проблемой отображения текста так, как я хочу.
Вот изображение из моего резюме с нарисованными таблицами, чтобы вы могли видеть, как выровнен текст
Вот как сейчас выглядит мой HTML (у меня есть отступы и границы для имитации строк таблицы, но я удалю их позже)
Я пытался дать определенные классы div, которые я хочу позиционировать, и использовать align-self или text-align, но безуспешно.
Вот мой HTML и CSS:
.header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.info {
border: 2px solid black;
padding-right: 500px;
padding-bottom: 30px;
}
.contact {
text-align: right;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "info address"> Address </div>
<div class = "info contact"> Phone:</div>
<div class = "info"> (123) 456 7890 </div>
<div class = "info address"> Zip Code </div>
<div class = "info contact"> Email:</div>
<div class = "info"> [email protected] </div>
</div>потому что вы используете padding-right: 500px; и padding-bottom: 30px;. это создает пространство нет для контента.
Ответы 7
Вместо имитации таблицы вы могли бы использовать таблицу. У меня сейчас нет компьютера, поэтому я постараюсь сделать все возможное с телефоном.
<table>
<tr>
<td>123 ln street</td>
<td>Phone</td>
<td>1234567890</td>
</tr>
<tr>
<td>12345</td>
<td>Email</td>
<td>[email protected]</td>
</tr>
</table>
он уже использует таблицу (Вот изображение из моего резюме с нарисованными таблицами, чтобы вы могли видеть, как выровнен текст), но хочет преобразовать их в flexbox. То, что в его случае можно использовать таблицу, можно было бы указать как комментарий, а не как ответ (или просто проголосовать за существующий комментарий). Таким образом, вы пропускаете реальный вопрос и не говорите ОП то, что он еще не знает, как это сделать.
Я думаю, это не то, что он ищет.
как я писал в комментариях. Это не задача для Flexbox, поскольку у вас есть табличные данные. Таким образом, вы также должны использовать table, что совершенно нормально и уместно в вашем случае.
Поскольку вы настаиваете на использовании Flexbox, у меня есть для вас решение. Все, что вам нужно сделать, это задать прямоугольникам ширину 100% / 3 с помощью calc-function и удалить свойство justify-content. Если вы используете border или padding, вы также должны использовать свойство box-sizing: border-box, чтобы обеспечить правильный расчет.
.header {
display: flex;
flex-wrap: wrap;
}
.info {
border: 2px solid black;
width: calc(100% / 3);
box-sizing: border-box;
}
.contact {
text-align: right;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "info address"> Address </div>
<div class = "info contact"> Phone:</div>
<div class = "info"> (123) 456 7890 </div>
<div class = "info address"> Zip Code </div>
<div class = "info contact"> Email:</div>
<div class = "info"> [email protected] </div>
</div>Вы можете установить ширину div как функцию расчета 33,33% - поля
Документация: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
если у вас ширина eta 33,33%, вам не нужно подавать в суд на функцию вычисления. Если вы используете функцию расчета, вы должны использовать 100% / 3, что вы также должны сделать, чтобы предотвратить возможную неточность пикселей на дисплеях с высоким разрешением. Однако в нем отсутствует самая важная информация, чтобы предотвратить проблемы при использовании границы, как в случае с OP, или если он добавляет отступ. Также вы могли бы отредактировать свой предыдущий ответ с этим.
.header {
display: flex;
flex-wrap: wrap;
border-color: #000000;
border-top: 1px solid;
border-right: 1px solid;
box-sizing: border-box;
}
.info {
flex: 0 0 33.3333%;
max-width: 33.3333%;
border-color: #000000;
border-left: 1px solid;
border-bottom: 1px solid;
padding: 3px 10px;
box-sizing: border-box;
}
.contact {
text-align: right;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "info address"> Address </div>
<div class = "info contact"> Phone:</div>
<div class = "info"> (123) 456 7890 </div>
<div class = "info address"> Zip Code </div>
<div class = "info contact"> Email:</div>
<div class = "info"> [email protected] </div>
</div>Не так аккуратно. Но если вы все еще хотите использовать flex box. это может помочь.
Я удаляю некоторые свойства, такие как:
justify-content: space-between;
padding-right: 500px;
padding-bottom: 30px;
Заголовок информации класса contact:
- с
width: 13%иtext-align: right
Содержание: информации класса info:
width: 69%иpadding: 8px;
Чистый пример с безтабличным:
.header {
display: flex;
flex-wrap: wrap;
}
.info {
width: 69%;
padding: 8px;
border: 1px solid black;
}
.contact {
width: 13%;
text-align: right;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "info address contact"> Address:</div>
<div class = "info">Stack Street, 26</div>
<div class = "info contact"> Phone:</div>
<div class = "info">(123) 456 7890 </div>
<div class = "info address contact"> Zip Code:</div>
<div class = "info">456-7890</div>
<div class = "info contact">Email:</div>
<div class = "info">[email protected]</div>
</div>Я бы добавил структуру строк в ваш html и использовал flex-grow вместо justify-content
Вот пример https://jsfiddle.net/fredklein/q79Lhp3z/4/
Я также удалил отступ в 500 пикселей, который не мешает гибкому макету.
Моя любимая ссылка на css flex на https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.row {
display: flex;
flex-wrap: wrap;
}
.info {
flex-grow: 1;
flex-basis: 0;
border: 2px solid black;
padding-bottom: 30px;
}
.contact {
text-align: right;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "row">
<div class = "info address"> Address </div>
<div class = "info contact"> Phone:</div>
<div class = "info"> (123) 456 7890 </div>
</div>
<div class = "row">
<div class = "info address"> Zip Code </div>
<div class = "info contact"> Email:</div>
<div class = "info"> [email protected] </div>
</div>
</div>Вот возможное решение без таблиц, используя flex-wrap: wrap для контейнера, процентные width-значения для дочерних элементов flex и определенные псевдоселекторы для тех, кто имеет одинаковую толщину границы везде, опуская соседние/двойные границы (создавая табличный дизайн) .
Вы можете добавить отступ справа/слева, чтобы создать дополнительное расстояние между границами и текстом.
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
}
.header {
display: flex;
flex-wrap: wrap;
}
.info {
width: 33.33%;
border: 1px solid #555;
border-bottom: none;
border-right: none;
}
.info:nth-child(3n) {
border-right: 1px solid #555;
}
.info:nth-last-child(-n+3) {
border-bottom: 1px solid #555;
}
.contact {
text-align: right;
padding-right: 0.5em;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "info address">Address</div>
<div class = "info contact">Phone:</div>
<div class = "info">(123) 456 7890</div>
<div class = "info address">Zip Code</div>
<div class = "info contact">Email:</div>
<div class = "info">[email protected]</div>
</div>На самом деле я не уверен, действительно ли вы хотите, чтобы границы были видны. Если нет, все становится намного проще:
* {
box-sizing: border-box;
}
.header {
display: flex;
flex-wrap: wrap;
}
.info {
width: 33.33%;
}
.contact {
text-align: right;
padding-right: 0.5em;
}<h1>Christopher Williamson</h1>
<div class = "header">
<div class = "info address">Address</div>
<div class = "info contact">Phone:</div>
<div class = "info">(123) 456 7890</div>
<div class = "info address">Zip Code</div>
<div class = "info contact">Email:</div>
<div class = "info">[email protected]</div>
</div>
это табличные данные. Поскольку такая таблица уместна и будет правильной вещью для использования. Альтернативно, CSS-Grid также решит эту проблему.