Top align text in flexbox

Question

I have created a layout in which there are buttons with text.

What I am trying to accomplish is to get the flexbox to work properly on IE and figure out how to get the text to align at the top of each.

I tried vertical-align: top; with no luck:

Text aligned at top

.flexbox {
  width: 100%;
  table-layout: fixed;
}
.flexbox tr {
  display: flex;
}
.flexbox tr td {
  flex: 1;
  display: flex;
}
button {
  flex: 1;
}

<table class=flexbox>
  <tr>
    <td>
      <button>Hello there my name is bob and this is a test Hello there my name is bob and this is a test Hello there my name is bob and this is a test</button>
      <td style="vertical-align:top;">
        <button>B</button>
        <td>
          <button>C</button>
          <td>
            <button>D</button>
            <td>
              <button>E</button>
              <td>
                <button>GF</button>
              </td>
  </tr>
</table>

http://jsfiddle.net/tXS6w/443/

Why are you using flexbox on a table? Without flex, vertical-align should work. — CBroe, Dec 02 '15 at 18:00
I would like all of the buttons to retain the same size no matter the text size difference. — user2402107, Dec 02 '15 at 18:02
I updated the jsfiddle to work with IE now however I still cant get the text at the top — user2402107, Dec 02 '15 at 19:42
I am trying to keep the as responsive as possible. Mind making a modification to my jfiddle to show me what you mean? — user2402107, Dec 02 '15 at 20:01
you have the text aligning properly on every browser!!! However on chrome. it comes outside of the button — user2402107, Dec 02 '15 at 20:06
http://jsfiddle.net/tXS6w/446/ - check out the updates I made. You are so close... it works in all browsers but on re-size it fails. — user2402107, Dec 02 '15 at 20:14

score 1 · Accepted Answer · edited May 23 '17 at 12:01

1

Flexbox doesn't play nice with the button element. In fact, button doesn't even recognize flex properties in some browsers.

Here's an alternative that may work for you. It's pure CSS, responsive and works across browsers (tested on Chrome, FF and IE11). Also, no heights needed.

.flexbox {
  display: flex;
}
.flexbox > section {
  flex: 1;
  display: flex;
  text-align: center;
  margin: 10px;
  min-width: 50px;
  border: 1px solid #777;
  background: linear-gradient(to bottom, #fafafa 0%, #ddd 100%);
}
.flexbox > section > a {
  flex: 1;
  padding: 2px 5px;
  color: black;
  text-decoration: none;
}
.flexbox > section:hover {
  background: linear-gradient(to bottom, #f1f1f1 0%, #d1d1d1 100%);
}

<div class="flexbox">
  <section>
    <a href="javascript:void(0)">
      Hello there my name is bob and this is a test Hello there my name
      is bob and this is a test Hello there my name is bob and this is a
      test
    </a>
  </section>
  <section>
    <a href="javascript:void(0)">B</a>
  </section>
  <section>
    <a href="javascript:void(0)">C</a>
  </section>
  <section>
    <a href="javascript:void(0)">D</a>
  </section>
  <section>
    <a href="javascript:void(0)">E</a>
  </section>
  <section>
    <a href="javascript:void(0)">GF</a>
  </section>
</div>

jsFiddle

edited May 23 '17 at 12:01

Community

1
1

answered Dec 03 '15 at 00:47

Michael Benjamin

346,931
104
581
701

I will have to say I am a little confused by your example, and I keep getting {"error": "Please use POST request"}....and when I click on one button the page tries to refresh or something. – user2402107 Dec 03 '15 at 12:21
This answer was intended to solve the layout problem. The 'button' functionality was not considered during this step. That's another issue. What's supposed to happen when the user clicks the button? – Michael Benjamin Dec 03 '15 at 12:25
there is an angularjs ng-show and ng-repeat in the button that takes thes user to the next page. – user2402107 Dec 03 '15 at 12:43
I updated demo to prevent click error and keep focus on layout design. You may need to use JS to make the `` element function as you wish. Otherwise, you can use ` – Michael Benjamin Dec 03 '15 at 12:49
1

I ended up using your section idea, and setting it as a button with bootstrap... it works thanks! – user2402107 Dec 03 '15 at 14:14

falsarella · Answer 2 · 2015-12-02T20:42:43.397

0

Change all your buttons, except the ones from the first column, for example:

<button>B</button>

To have a span wrapping its content text:

<button><span>B</span></button>

Now you can set the span to fill the button's space as you need:

button > span {
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
}

Don't forget to position button as relative:

button {
  flex: 1;
  position: relative;
}

Also, as a side note, it is a good practice to always indent your html and close the tags properly (in this case, the tds' closing tags were missing).

See also a working responsive Fiddle here.

edited Dec 02 '15 at 20:42

answered Dec 02 '15 at 20:27

falsarella

12,217
9
69
115

Tried this already. Doesn't work. Add the `` tags to the first column ` – Michael Benjamin Dec 02 '15 at 20:29
@Michael_B What if the `span` tag is not required for the first column? – falsarella Dec 02 '15 at 20:34
Well then the problem would be easily solved with positioning properties, and your answer should be accepted. – Michael Benjamin Dec 02 '15 at 20:35
I agree with michael_b – user2402107 Dec 02 '15 at 20:45
And, it is responsive, as required. =] – falsarella Dec 02 '15 at 20:46
Everything is working but the main problem is as soon as CSS sees flex it stretches the button I just want to move the text to the top so its all aligned without spans with flex. – user2402107 Dec 02 '15 at 23:08

Top align text in flexbox

2 Answers2

jsFiddle