CODEWITHSUNDEEP
htmlcssflexboxtext-align
christ1
christ1

Reputation: 3

Trouble Aligning Text in Flexbox divs

I'm trying to convert my resume to HTML, and ran into an issue with displaying the text the way I want.

Here is an image from my resume with tables drawn so you can see how the text is aligned

enter image description here

Here is how my HTML currently looks (I have padding and border to simulate table lines but will remove those later)

enter image description here

I've tried giving specific classes to the divs I want to be positioned and using align-self or text-align, and have not been successful.

Here's my HTML and 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>

Upvotes: 0

Views: 73

Answers (7)

Johannes
Johannes

Reputation: 67799

Here's a possible solution without tables, using flex-wrap: wrap for the container, percentage width-values for the flex children and certain pseudo-selectors for those to have the same thickness of border everywhere, omitting adjacent /double borders (creating a table-like design).

You can add padding right/left to create additional distance between borders and text.

* {
  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>

Acutally I am not sure if you actually want the borders to be visible. If not, it gets a lot simpler:

* {
  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>

Upvotes: 0

Fred Klein
Fred Klein

Reputation: 658

I would add the structure of rows in your html and use flex-grow instead of justify-content

Here is an example https://jsfiddle.net/fredklein/q79Lhp3z/4/

I have also removed the 500px padding which prevents hinders the flex layout.

My favorite reference to 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 protected] </div>
  </div>
</div>

Upvotes: 1

ℛɑƒ&#230;Ŀᴿᴹᴿ
ℛɑƒ&#230;Ŀᴿᴹᴿ

Reputation: 5376

I remove some properties such:

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

Header of information with class contact:

  • with width: 13% & text-align: right

Content: of information with class info:

  • width: 69% & padding: 8px;

Clean example with tableless:

.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>

Upvotes: 0

Aravind Prabash
Aravind Prabash

Reputation: 443

.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>

Not that neat. But if you still want to use flex box. this might help.

Upvotes: 1

anthony0030
anthony0030

Reputation: 37

You can set the width of the divs as a calc function 33.33% - margins

Documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

Upvotes: -1

tacoshy
tacoshy

Reputation: 13008

like I wrote in the comments. This is not a task for Flexbox as yyou have tabular-data. As such you also should use a table which is completely fine and appropiate in your case.

As you insist though on using Flexbox I have a solution for you. All you need to do is to give boxes a width of 100% / 3 using the calc-function and remove the justify-content property. If you use a border or padding, you also have to use the box-sizing: border-box property to ensure a correct calculation.

.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>

Upvotes: 0

anthony0030
anthony0030

Reputation: 37

Instead of simulating a table you could actually use a table. I don’t have my computer at the moment so I will do my best with my phone.

<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>

Upvotes: 0

Related Questions