CODEWITHSUNDEEP
cssflexbox
Filip Mamcarczyk
Filip Mamcarczyk

Reputation: 201

Center last row element using Flexbox

When I resize the window to smaller resolution I would like the last element to be centered. I know that I can achive that by setting parent's justify-content parameter to space-around or center, but it has to be set to: space-between.

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: rgba(255, 0, 0, 0.3);
  padding: 0;
}
li {
  list-style-type: none;
  display: inline-block;
  min-width: 100px;
  height: 100px;
  background: red;
  margin: 10px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

http://jsfiddle.net/k7fzdn80/

Upvotes: 3

Views: 8813

Answers (4)

vencedor
vencedor

Reputation: 711

I have another proposal. Using the calc() to calculate the width of the flex item. And so the last element could be centered.

    .container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        row-gap: 10px;
    }

    .column {
        display: flex;
        width: calc(100% / 4);
        overflow: hidden;

        text-align: center;
        background: green;
    }

    .inside-column {
        background: white;
        width: 100%;
        display: block;
        margin: 15px;
        border: 5px solid red;
    }

    .wrap {
      max-width: 350px;
      background: #CCC;
    }
<div class="container">
    <div class="column">
        <a href="#" class="inside-column">
            1
            <br>Content Content Content
        </a>
    </div>
    <div class="column">
        <div class="inside-column">
            2
            <br>Content Content Content
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            3
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            4
            <br>Content Content Content
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            5
            <br>Content Content Content
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            6
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            7
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            8
        </div>
    </div>
    <div class="column">
        <div class="inside-column">
            9
        </div>
    </div>

</div>

<br>
<br>

<div class="wrap">
    <div class="container">
        <div class="column">
            <a href="#" class="inside-column">
                1
                <br>Content Content Content
            </a>
        </div>
        <div class="column">
            <div class="inside-column">
                2
                <br>Content Content Content
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                3
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                4
                <br>Content Content Content
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                5
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                6
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                7
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                8
            </div>
        </div>
        <div class="column">
            <div class="inside-column">
                9
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Oriol
Oriol

Reputation: 288650

It's not possible. space-between definition says

If [...] there is only a single flex item on the line, this value is identical to 'flex-start'.

The only way would be doing the alignment manually, e.g. with media queries and auto margins. But then the layout won't be flexible at all.

Upvotes: 0

m4n0
m4n0

Reputation: 32355

Unfortunately, it is not possible with flexbox for your problem. But I have a CSS hack to solve the issue. Target the last element within the media-query. I have used custom breakpoints below.

 ul {
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   background: rgba(255, 0, 0, 0.3);
   padding: 0;
 }
 li {
   list-style-type: none;
   display: inline-block;
   min-width: 100px;
   height: 100px;
   background: red;
   margin: 10px;
 }
 @media (min-width: 376px) and (max-width: 494px) {
   li:last-child {
     margin: 10px auto;
   }
 }
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Upvotes: 2

chillvivek
chillvivek

Reputation: 310

use auto margin

margin: 10px auto;

is this what you expect? Solution

Upvotes: 8

Related Questions