CODEWITHSUNDEEP
cssflexbox
chles
chles

Reputation: 185

Flex-wrap and alignment

I have a div in flexbox with 2 elements and space-between between them. I have also a flex-wrap to the container and a flex auto for each element.

Is there a way to make the first element having a text alignment on the left before it wrap and after a text alignment to the center.

The problem is that I don't know when elements are wrapping.

Here an example : https://jsfiddle.net/bj9km7vg/1/

.align-center{
   text-align: center; // it have to be visible only when the div is wrap and 100% of the with
}

Thanks all,

Upvotes: 0

Views: 118

Answers (1)

Temani Afif
Temani Afif

Reputation: 272752

You can do this differently and no need to think about text-align but about the element width since it's only one line. Basically your text will always be centred but the width will either fit the content or be full width:

header {
  display: flex;
  flex-wrap: wrap;
}

header div:first-child {
  text-align:center; /*center by default*/
  flex-grow:1; /*will be full width after the wrap*/
}
header div:last-child {
  flex-grow:100; /*make it consume more space to have a left alignment before wrap*/
}


ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content:center;
}
li {
  margin: 0 1em;
}
<header>
  <div class="align-center">
    <a href="">Have to be align</a>
  </div>
  <div>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</header>

Update

To control the margin you can consider a pseudo element inside the second container:

header {
  display: flex;
  flex-wrap: wrap;
}

header div:first-child {
  text-align:center; /*center by default*/
  flex-grow:1; /*will be full width after the wrap*/
}
header div:last-child {
  flex-grow:100; /*make it consume more space to have a left alignment before wrap*/
  display: flex;
  flex-wrap:wrap;
}


ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-grow:1;
}
li {
  margin: 0 1em;
}

header div:last-child::before {
  content:"";
  width:6em; /*your margin*/
}
<header>
  <div class="align-center">
    <a href="">Have to be align</a>
  </div>
  <div>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>
</header>

Upvotes: 1

Related Questions