CSS Flex Box Last Space Removed

CSS flex box last space removed

Reason

When you don't use display: flex, the your layout becomes something like

<div class="has_flex"><!--
  --><anonymous style="display: inline">Some text </anonymous><!--
  --><a         style="display: inline">Link</a><!--
--></div>

The text (including the space at the end) is wrapped inside an anonymous inline box:

Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.

However, Flexbox layout blockifies the flex items:

The display value of a flex item is blockified: if
the specified display of an in-flow child of an element
generating a flex container is an inline-level value, it computes
to its block-level equivalent.

Then, the layout will be like

<div class="has_flex"><!--
  --><anonymous style="display: block">Some text </anonymous><!--
  --><a         style="display: block">Link</a><!--
--></div>

This might not seem directly related, but it's relevant because of the white-space processing model:

Then, the block container's inlines are laid out. [...] As each line
is laid out, [...]


  1. If a space (U+0020) at the end of a line has white-space
    set to normal, nowrap, or pre-line, it is also removed.

So when the anonymous element and the link were both inline, the space was at the middle of a line. If you had multiple spaces they would collapse into a single one, but not disappear completely.

However, when you use flexbox, each flex item has its own lines, and the space is therefore at the end of a line. So it's removed.

Note this problem is not specific of flexbox, spaces at the end of an inline-block are also removed.

.in-blo {  display: inline-block;}
<div><span class="inline">Some text </span><a href="link">Link</a></div><div><span class="in-blo">Some text </span><a href="link">Link</a></div>

How to remove the last empty space in css flex

Try this. This should solve your problem

.form-control {
  width: 100%;
}

How to remove remaining whitespace after a flex element wrapped below?

You can add flex-grow: 1; on .badge to tell it to take up all of the available space.

.badges {  border: 1px solid red;  height: 25px;  max-height: 25px;  line-height: 25px;  padding-right: 120px;  /* creates space for the button */  position: relative;  overflow: hidden;  display: inline-flex;  flex-wrap: wrap;}
.badges .badge {  border: 1px solid green;  flex-grow: 1; }
.badges button {  width: 120px;  max-width: 120px;  min-width: 120px;  height: 25px;  position: absolute;  right: 0;}
<div class="badges">  <div class="badge">FooBar 418$</div>  <div class="badge">Baz 132$</div>  <div class="badge">BarFoo 321$</div>  <div class="badge">Qux 500$</div>  <button>Find out more</button></div>

How to remove whitespace in flex layout

clear: left; will not solve your issue properly.

You use flexbox but some flexbox property is wrong. overflow creating issue in mobile devices. You have to remove overflow-x: hidden; from html,boy leave default value. flex-wrap: 100vh; is wrong it should be flex-wrap: wrap | nowrap; read flex-wrap. justify-content: left; left is wrong it should be justify-content: flex-start | flex-end | center | stretch | space-between | space-around | space-evenly; Other values Like left right, start and end have browser support issue read justify-content. Same for align-items read align-items. I fix responsive css issue. Also .boxcontent width will be 100%.

You have read flexbox.

Here is modified css

/* Master styles */

html, body {
    font-family: "Lato", sans-serif;
    margin: 0px;
    height: 100%;
    width: 100%;
    padding: 0px;
}

.boxcontent {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
}

.box {
    position: relative;
    flex-basis: calc(20% - 20px);
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc(20% - 20px);
    height: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 10px;
    transition: 0.5s;
}

@media (max-width: 767px){
  .box{
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
  }
}
@media (max-width: 575px){
  .box{
    flex-basis: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
}

.box:hover {
    height: 400px;

}

.box  .imgBx{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.box .imgBx img {
    max-width: 100%;
    opacity: 0.1;
    transition: 0.5s;
}

.box:hover .imgBx img{
    opacity: 1;
}

.box::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;

    z-index: -1;
}

.box::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -2;
    filter: blur(40px);
    background: #060C21;
}

.box:before,
.box::after 
{
    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}

.box:nth-child(2) before,
.box::nth-child(2) after 
{
    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);
}

.box:nth-child(3) before,
.box::nth-child(3) after 
{
    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);
}

.box .content {
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    bottom: 10px;
    height: 90px;
    background: rgba(red, green, blue, alpha);
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    opacity: 0;
    transition: 0.5s;

}

.box:hover .content
{
 opacity: 1;
}

.box .content h2
{
    font-size: 20px;
    color: #fff;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 1px;
}

header {
    background-color: crimson;
    height: 66px;
}

header .logo {
    float: left;
    padding-top: 10px;
    height: inherit;
    font-weight: bolder;
    margin-left: 2em;

}

header ul {
    float: right;
    margin: 0px;
    padding: 0px;
    list-style: none;
}

header * {
    color: white;
}
header .logo-text {
    font-weight: bolder;
    font-size: xx-large;
    font-family: 'Candal', serif;
}

header ul li {
    float: left;
}

header ul li a {
    display: block;
    padding: 21px;
    font-size: 1.1em;
    text-decoration: none;
    font-family: 'Candal', serif;
}

header ul li a:hover {
    background: rgb(116, 5, 27);
    transition: 0.5s
}

    /* Bottom footer syles */
.footer {
    background: #303036;
    color: #d3d3d3;
    height: 400px;
    position: absolute;

}

.footer .footer-bottom {
    background: #343a40;
    color: white;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;

}
.footer .footer-content {
    height: 350px;
    display:flex
}

.footer .footer-content .footer-section {
    flex: 1;
    padding: 25px;
}

.footer .footer-content .about h1 span {
    color: crimson;
    font-weight: bolder;
    font-size: 1.3em;
}

.footer .footer-content h1,
.footer .footer-content h2 {
    color: white;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    font-weight: bolder;
    margin-bottom: 8px;
}
.footer .footer-content .links ul a {
    display: block;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: white;
}

.footer .footer-content .links ul a:hover{
    color: white;
    margin-left: 15px;
    transition: all .3s;
}

.footer .footer-content .contact-form .contact-input {
    background: #272727;
    color: #bebdbd;
    margin-bottom: 10px;
    line-height: 1.5rem;
    padding: .9rem 1.4rem;
    border: none;
    display: block;
}
.footer .footer-content .contact-form .contact-input:focus {
    background: #1a1a1a;
}
.btn-big {
    padding: .7rem 1.3rem;
    line-height: 1.3rem;
    background-color: #006669;
    border:none;
    font-weight: bolder;
    font-size: medium;
    color: white;
}

  @media only screen and (max-width: 934px) {
      .footer {
          height: auto;
      }
      .footer .footer-content {
          height: auto;
          flex-direction: column;
      }
      .footer .footer-content .contact-form {
          padding-bottom: 90px;
      }
      .boxcontent {
          height: auto;
      }
  }

  @media only screen and (max-width: 750){
    .footer {
        height: auto;
    }
    .footer .footer-content {
        height: auto;
        flex-direction: column;
    }
    .footer .footer-content .contact-form {
        padding-bottom: 90px;
    }
    .boxcontent {
        height: auto;
    }
}

Snippet is below

/* Master styles */
html, body {    font-family: "Lato", sans-serif;    margin: 0px;    height: 100%;    width: 100%;    padding: 0px;}
.boxcontent {    display: flex;    flex-direction: row;    justify-content: center;    flex-wrap: wrap;    width: 100%;}
.box {    position: relative;    flex-basis: calc(20% - 20px);    flex-grow: 0;    flex-shrink: 0;    max-width: calc(20% - 20px);    height: 300px;    display: flex;    justify-content: flex-start;    align-items: flex-start;    margin: 10px;    transition: 0.5s;}
@media (max-width: 767px){  .box{    flex-basis: calc(50% - 20px);    max-width: calc(50% - 20px);  }}@media (max-width: 575px){  .box{    flex-basis: calc(100% - 20px);    max-width: calc(100% - 20px);  }}
.box:hover {    height: 400px;
}
.box  .imgBx{    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    padding: 10px;    box-sizing: border-box;}
.box .imgBx img {    max-width: 100%;    opacity: 0.1;    transition: 0.5s;}
.box:hover .imgBx img{    opacity: 1;}
.box::before {    content: '';    position: absolute;    top: -2px;    left: -2px;    right: -2px;    bottom: -2px;       z-index: -1;}
.box::after {    content: '';    position: absolute;    top: -2px;    left: -2px;    right: -2px;    bottom: -2px;    z-index: -2;    filter: blur(40px);    background: #060C21;}
.box:before,.box::after {    background-image: linear-gradient(235deg,#89ff00,#010615,#00bcd4);}
.box:nth-child(2) before,.box::nth-child(2) after {    background-image: linear-gradient(235deg,#ff005e,#010615,#fbff00);}
.box:nth-child(3) before,.box::nth-child(3) after {    background-image: linear-gradient(235deg,#772aff,#010615,#2196f3);}
.box .content {    position: absolute;    bottom: 0;    left: 10px;    right: 10px;    bottom: 10px;    height: 90px;    background: rgba(red, green, blue, alpha);    display: flex;    justify-content: center;    text-align: center;    align-items: center;    opacity: 0;    transition: 0.5s;    }
.box:hover .content{ opacity: 1;}
.box .content h2{    font-size: 20px;    color: #fff;    font-weight: 500;    line-height: 20px;    letter-spacing: 1px;}
header {    background-color: crimson;    height: 66px;}
header .logo {    float: left;    padding-top: 10px;    height: inherit;    font-weight: bolder;    margin-left: 2em;     }
header ul {    float: right;    margin: 0px;    padding: 0px;    list-style: none;}
header * {    color: white;}header .logo-text {    font-weight: bolder;    font-size: xx-large;    font-family: 'Candal', serif;}
header ul li {    float: left;}
header ul li a {    display: block;    padding: 21px;    font-size: 1.1em;    text-decoration: none;    font-family: 'Candal', serif;}
header ul li a:hover {    background: rgb(116, 5, 27);    transition: 0.5s}

    /* Bottom footer syles */.footer {    background: #303036;    color: #d3d3d3;    height: 400px;    position: absolute;    }
.footer .footer-bottom {    background: #343a40;    color: white;    height: 50px;    width: 100%;    text-align: center;    position: absolute;    bottom: 0px;    left: 0px;    padding-top: 20px; }.footer .footer-content {    height: 350px;    display:flex}
.footer .footer-content .footer-section {    flex: 1;    padding: 25px;}
.footer .footer-content .about h1 span {    color: crimson;    font-weight: bolder;    font-size: 1.3em;}
.footer .footer-content h1,.footer .footer-content h2 {    color: white;}
.footer .footer-content .about .contact span {    display: block;    font-size: 1.1em;    font-weight: bolder;    margin-bottom: 8px;}.footer .footer-content .links ul a {    display: block;    margin-bottom: 10px;    font-size: 1.2em;    color: white;}
.footer .footer-content .links ul a:hover{    color: white;    margin-left: 15px;    transition: all .3s;}
.footer .footer-content .contact-form .contact-input {    background: #272727;    color: #bebdbd;    margin-bottom: 10px;    line-height: 1.5rem;    padding: .9rem 1.4rem;    border: none;    display: block;}.footer .footer-content .contact-form .contact-input:focus {    background: #1a1a1a;}.btn-big {    padding: .7rem 1.3rem;    line-height: 1.3rem;    background-color: #006669;    border:none;    font-weight: bolder;    font-size: medium;    color: white;}

  @media only screen and (max-width: 934px) {      .footer {          height: auto;      }      .footer .footer-content {          height: auto;          flex-direction: column;      }      .footer .footer-content .contact-form {          padding-bottom: 90px;      }      .boxcontent {          height: auto;      }  }
  @media only screen and (max-width: 750){    .footer {        height: auto;    }    .footer .footer-content {        height: auto;        flex-direction: column;    }    .footer .footer-content .contact-form {        padding-bottom: 90px;    }    .boxcontent {        height: auto;    }}
<html lang="eng">
<head>    <meta charset="utf-8" />    <title>Pagel</title>    <meta name="viewpoint" content="width=device-width, initial-scale=1">    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
    <!-- Google font -->    <link href="https://fonts.googleapis.com/css2?family=Candal&display=swap" rel="stylesheet">        <link rel="stylesheet" href="styles.css"></head>
<body>    <header>        <div class="logo">            <div class="logo-text"><span>Pagel</span>Romania</div>        </div>        <ul class="nav">            <li><a href="#">Acasa</a></li>            <li><a href="#">Despre Noi</a></li>            <li><a href="#">Produse</a></li>        </ul>    </header> <div class="boxcontent">    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div>    <div class="box">        <div class="imgBx">            <img src="imagini/grout.jpg" alt="Materiale pentru contrtuctie">        </div>        <div class="content">            <h2>Mortar de subturnare</h2>        </div>    </div></div>

    <!-- Bottom footer -->    <div class="footer">        <div class="footer-content">            <div class="footer-section about">                <h1 class="brand"><span>Pagel</span> Romania</h1>                <p>De peste 40 de ani firma PAGEL SPEZIAL-BETON GmbH & Co. KG din Essen, a contribuit în mod hotărîtor                 la dezvoltarea şi perfecţionarea mortarelor de subturnare, precum şi a altor mortare speciale.</p>                <div class="contact">                    <span>☎   0762-837-458</span>                    <br>                    <span>✉   office@solmat.ro</span>                </div>                <div class="socials">                    <a href="#"><i class="fab fa-facebook"></i></a>                    <a href="#"><i class="fab fa-linkedin"></i></a>                    <a href="#"><i class="fab fa-twitter"></i></a>                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>            </div>            <div class="footer-section links">            <h2>Link-uri rapide</h2>            <br/>            <ul>                            <a href="#">                    <li>Conditii generale</li></a>                <a href="#">                    <li>Politica de confidentialitate</li>                </a>                <a href="#">                    <li>Linkuri</li>                </a>                <a href="#">                    <li>Despre noi</li>                </a>                <a href="#">                    <li>Notificari site</li>                </a>                <a href="#">                    <li>Home</li>                </a>            </ul>            </div>            <div class="footer-section contact-form">                <h2>Contactati-ne</h2>                <br>                <form action="index.html" method="POST">                <input type="email" name="email" class="text-input contact-input" placeholder="Adresa dvs. de email">                <textarea name="mesaj" class="text-input contact-input" placeholder="Mesajul dvs."></textarea>                 <button type="submit" class="btn btn-big">                    <i class="fas fa-envelope">                    </i>                    Trimiteti                </button>                </form>            </div>
        </div>        <div class="footer-bottom">            © pagel.ro ┃ Design by Toma Dragos        </div>

    </div>
</body><script>    const portfolioItems = document.querySelectorAll('.portfolio-item-wrapper')
    portfolioItems.forEach(portfolioItem => {         portfolioItem.addEventListener('mouseover', () => {              portfolioItem.childNodes[1].classList.add('img-darken');         })         portfolioItem.addEventListener('mouseout', () => {              portfolioItem.childNodes[1].classList.remove('img-darken');         })
    })</script></html>

Removing display:flex adds spaces around a link. Why?

It's because flexbox remove the default white space between inline or inline-block elements.

Here is a code without flexbox where we have white space:

.box {  font-size:30px;}
<div class="box">  <a>click</a>  <a>here</a></div>

how to remove spaces in between flexitems in flex box model

It's got a button you click on and it will reorder the flex items randomly. It's not perfect, It doesn't always end up with 3 blocks for the bottom row.

DEMO

HTML

<header>
  <fieldset id="ui">
    <legend><span class="dropcap">F</span><span>lexbox</span> <span class="big">R</span><span>andom</span> <span class="big">O</span><span>rdered</span> <span class="big">G</span><span>rid</span></legend>
    <button id="btn">
      <a href='#'>Shuffle</a>
    </button>
  </fieldset>
</header>
<main id="flexMain" class="flexible">
  <ul id="flexShell">
    <li class="flexItem">01</li>
    <li class="flexItem">02</li>
    <li class="flexItem">03</li>
    <li class="flexItem">04</li>
    <li class="flexItem">05</li>
    <li class="flexItem">06</li>
    <li class="flexItem">07</li>
    <li class="flexItem">08</li>
    <li class="flexItem">09</li>
    <li class="flexItem">01</li>
    <li class="flexItem">11</li>
    <li class="flexItem">12</li>
    <li class="flexItem">13</li>
    <li class="flexItem">14</li>
    <li class="flexItem">15</li>
  </ul>
</main>

CSS

html {
  color: #000;
  font: 600 16px/1.45 Consolas;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  text-decoration: none;
}

body {
  width: 100vw;
  height: 100vh;
  background: #000;
  color: #003F7D;
}

#flexMain {
  display: inline-flex;
  flex-flow: column nowrap;
  jusify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  width: 100vw;
  height: 100vh;
}

#flexShell {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  border: 2px solid blue;
  width: 100%;
  max-height: 100%;
  min-height: 500px;
  padding: -2px;
}

.flexItem {
  display: inline-block;
  height: 100%;
  min-width: 5em;
  min-height: 100px;
}

.flexible * {
  text-align: center;
  outline: 3px solid hsla(60, 20%, 50%, .7);
}

li:nth-of-type(2n) {
  flex: 1 1 25%;
  width: 10em;
  background: hsla(0, 100%, 70%, 1);
  max-width: 60em;
}

li:nth-of-type(2n+1) {
  flex: 1 1 25%;
  width: 10em;
  background: #33FF66;
  max-width: 40em;
}

li:nth-of-type(3n+1) {
  flex: 1 1 50%;
  width: 20em;
  background: hsla(195, 100%, 60%, 1);
  max-width: 80em;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: transparent;
}

#ui {
  position: relative;
  top: 48px;
  right: 0;
  border: 1px solid #F33;
  width: 100%;
  height: 32px;
  background: hsla(0, 0%, 0%, .3);
  border-radius: 10px;
  display: table;
}

#btn {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 3px 5px;
  border-radius: 6px;
  font-variant: small-caps;
  color: #fc3;
  height: 28px;
  width: 64px;
  background: hsla(0, 0%, 0%, .7);
  border: 1px solid #FC3;
  display: table-cell;
}

legend {
  color: #6A2244;
  font: 600 1.5rem/1.2 "Book Antiqua";
  font-variant: small-caps;
  float: left;
}

.dropcap {
  color: #FD9;
  display: inline;
  float: left;
  font-size: 3.26em;
  line-height: .5em;
  margin: .205em .1em 0 0;
  text-transform: uppercase;
}

.dropcap + span {
  -1em;
}

.big {
  color: #FD9;
  font-size: 2rem;
}

JS

function qa(sel, ele) {
  if (!ele) {
    ele = document;
  }
  return Array.prototype.slice.call(ele.querySelectorAll(sel));
}
var fxArr = qa('.flexItem');
var rand = function(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var frq = rand(1, 15);

function shuffle(frq, arr) {
  for (var i = 0; i < frq; i++) {
    for (var k = 0; k < arr.length; k++) {
      var n = rand(1, 15);
      var fx = arr[k];
      fx.style.order = n;
    }
  }
}

document.getElementById('btn').addEventListener('click', function(event) {
  event.preventDefault();
  shuffle(frq, fxArr);
}, true);

window.onload = shuffle(frq, fxArr);

Related Topics

Android: How to Add HTML Links Inside a Listview

Phonegap - How to Open External Link Inside The App

Character Limit in HTML

Viewport Meta Tags Vs Media Queries

Outline on Only One Border

Wrap Table Row to The Next Line

Textarea to Fill a Parent Container Exactly, with Padding

How to Display Openweathermap Weather Icon

Giving Background-Color to Body Applying Whole Page. Why

CSS Flexbox | Reordering Elements in Mobile

Jquery Autocomplete Where The Results Are Links

Yet Another HTML/CSS Layout Challenge - Full Height Sidebar with Sticky Footer

How to Make Links in Fromhtml Clickable? (Android)

How to Safely Render HTML in React

How to Break Word After Special Character Like Hyphens (-)

What's The Difference Between Meta Name and Meta Property

Cordova List All Files from Application Directory (Www)

CSS Background Image Not Displaying


Leave a reply



Submit