Aligning text to first left block

Question

I want to align text to first left block. The block are aligned to middle. When changing the screen/browser width, the text should be adapted.

What to do, to get this:

Is it possible in IE?

#container {
  border: 1px solid gray;
}
.outerBlock {
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.block {
  width: 150px;
  height: 150px;
  background-color: #cccccc;
  margin: 10px;
}

<div id="container">
  Aligned left to first block
  <div class="outerBlock">  
    <div class="block">1</div>    
    <div class="block">2</div>    
    <div class="block">3</div>    
    <div class="block">4</div>    
    <div class="block">5</div>
  </div>
</div>

Possible duplicate of [Center flex container but align left flex items](http://stackoverflow.com/questions/32802202/center-flex-container-but-align-left-flex-items) — Michael Benjamin, Feb 27 '16 at 12:37

symlink · Accepted Answer · 2016-02-28T08:55:50.270

The only way to do this with flexbox is to set the boxes to justify-content: space-between;. Then give the text at the top a left margin of 10px:

#container {
    border: 1px solid gray;
}

#container span{
 margin-left:10px;
}

.outerBlock {
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.block {
    width: 150px;
    height: 150px;
    background-color: #cccccc;
    margin: 10px;
}

<div id="container">
    <span>Aligned left to first block</span>
    <div class="outerBlock">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
    </div>
</div>

UPDATE: Positioned with jQuery

var el = $('.outerBlock > .block');
var os = el.offset();

$('.blockText').css("margin-left",os.left - parseInt(el.css('margin-left')));

*{
  box-sizing:border-box;
}

#container {
    border: 1px solid gray;
}

.outerText {
    border: 1px solid red;
}

.outerBlock {
    border: 1px solid red;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.block {
    width: 150px;
    height: 150px;
    background-color: #cccccc;
    margin: 10px;
}
.blockText {
    width: 150px;
    max-height: 20px;
    margin: 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div class="outerText">
      <div class="blockText">News</div> 
    </div>
    
    <div class="outerBlock">
        <div class="block">1</div>
        <div class="block">2</div>
        <div class="block">3</div>
        <div class="block">4</div>
        <div class="block">5</div>
    </div>
</div>

I was thinking about something more generic. Something like this: http://jsfiddle.net/0h779z45/1/. But in this case I have to duplicate the text blocks... Is it possible without duplicating? — user3752660, Feb 28 '16 at 08:10
No, because the boxes in `outerBlock` are being spaced by `flex` according to the number of boxes and the available width of their containing div. So the left of the first block is dependent on those factors. Would you be willing to use jQuery? — symlink, Feb 28 '16 at 08:21

Aligning text to first left block

1 Answers1