无法在 Flexbox div 中对齐文本

Question

我正在尝试将我的简历转换为 HTML，并将运行转换为按我想要的方式显示文本的问题。

这是我简历中的一张图片，其中绘制了 tables，因此您可以看到文本是如何对齐的

这是我的 HTML 当前的样子（我有填充和边框来模拟 table 行，但稍后会删除它们）

我试过为我想要定位的 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@domain.com </div>
</div>

Answer 1

您实际上可以使用 table 而不是模拟 table。我现在没有电脑，所以我会用我的 phone.

尽力而为

<table>
    <tr>
        <td>123 ln street</td>
        <td>Phone</td>
        <td>1234567890</td>
    </tr>
    <tr>
        <td>12345</td>
        <td>Email</td>
        <td>Me@domain.ext</td>
    </tr>
</table>

Answer 2

就像我在评论中写的那样。这不是 Flexbox 的任务，因为你有 tabular-data。因此，您还应该使用 table，它完全适合您的情况。

由于您坚持使用 Flexbox，因此我为您提供了一个解决方案。您需要做的就是使用 calc-function 将框的宽度设置为 100% / 3 并删除 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@domain.com </div>
</div>

Answer 3

您可以将 div 的宽度设置为计算函数 33.33% - 边距

文档： https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Answer 4

.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@domain.com </div>
</div>

没那么整洁。但是如果你还是想用flex box。这可能会有所帮助。

Answer 5

我删除了一些属性，例如：

justify-content: space-between;
padding-right: 500px;
padding-bottom: 30px;

Header 的信息与 class contact:

与 width: 13% & text-align: right

内容: 的信息有 class 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@domain.com</div>
</div>

Answer 6

我会在您的 html 中添加行结构，并使用 flex-grow 而不是 justify-content

这是一个例子https://jsfiddle.net/fredklein/q79Lhp3z/4/

我还删除了 500px 的内边距以防止妨碍 flex 布局。

我最喜欢 css flex at 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@domain.com </div>
  </div>
</div>

Answer 7

这是一个没有表格的可能解决方案，使用 flex-wrap: wrap 容器，百分比 width-flex 子值和某些具有相同边框厚度的 pseudo-selectors无处不在，省略相邻/双边框（创建 table-like 设计）。

您可以添加填充 right/left 以在边框和文本之间创建额外的距离。

* {
  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@domain.com</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@domain.com</div>
</div>

无法在 Flexbox div 中对齐文本

Trouble Aligning Text in Flexbox divs

html

css

text-align

flexbox