CODEWITHSUNDEEP
htmlcssflexbox
pjk_ok
pjk_ok

Reputation: 947

Flex Wrap Elements So They Are Still Justified to the Center - CSS

I'm using flex-wrap on a bottom nav element. Is it possible to center the wrapped element (which by default is then aligned to the left after it wraps)?

In the example below the menu-items wrap to left hand side when the window size is reduced.

Many thanks for any help.

Here is the codepen.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

.pipe {
    margin: 0 .5rem 0 .35rem;
    position: relative;
    top: 1px;
}
<ul class="bottom-nav">
    <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
    <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
    <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
    <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
    <li class="tl bottom-nav-items link">Lorem Ipsum</li>
</ul>

Upvotes: 1

Views: 183

Answers (1)

strek
strek

Reputation: 1230

Try using justify-content:center; The content gets centered without going to left Hope this is what you are looking for

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
justify-content:center;
}

.pipe {
    margin: 0 .5rem 0 .35rem;
    position: relative;
    top: 1px;
}
<ul class="bottom-nav">
  <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
  <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
  <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
  <li class="tl bottom-nav-items link">Lorem Ipsum<span class="pipe"> | </span></li>
  <li class="tl bottom-nav-items link">Lorem Ipsum</li>
</ul>

Upvotes: 4

Related Questions