1

I'm trying to create a footer using CSS flex, with the following conditions :

  • 3 elements (links)
  • the first 2 must be at the left of the screen
  • the last one must be perfectly centered

Live snippet 

* {
    box-sizing: border-box;
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    width: 100%;
    height: 100%;
    display: flex;
    flex: 1;
}

footer {
    background: black;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    display: flex;
    height: 66px;
    list-style: none;
    align-items: center;
    justify-content: center;
}



li {
    flex: 1;
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

li div {
    padding: 1em;
}

li.centered {
    justify-content: center;
}

li.centered div {
    background: lightgrey;
    color: black;
    height: 100%;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
    <main></main>
    <footer>
        <ul>
            <li>
                <div>
                    <a href="http://google.fr">First</a>
                </div>
                <div>
                    <a href="http://google.fr">Second, large, full of text element</a>
                </div>
            </li>
            <li class="centered">
                <div>
                    <a href="http://google.fr">Centered element</a>
                </div>
            </li>
            <li></li>
        </ul>
    </footer>
</body>
</html>

This is working fine, but I dislike the last empty li element (use to add a 3rd columns).

Does anyone have a solution for this, without an empty element in dom ?

core114
  • 5,155
  • 16
  • 92
  • 189
pgrasland
  • 37
  • 4

2 Answers2

2

This is working fine, but I dislike the last empty li element (use to add a 3rd columns).

Does anyone have a solution for this, without an empty element in dom ?

You can easily replace it with a pseudo element (ul:after) - you just need to make sure that you apply the style you have for li for that one as well then.

* {
    box-sizing: border-box;
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background: black;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    display: flex;
    height: 66px;
    list-style: none;
    align-items: center;
    justify-content: center;
}

/* pseudo element to replace empty LI at the end */
ul:after {
  content: ""; /* content property needs to be set, otherwise pseudo element is not rendered at all */
}
/* apply general LI formatting for pseudo element as well */
li, ul:after {
    flex: 1;
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

li div {
    padding: 1em;
}

li.centered {
    justify-content: center;
}

li.centered div {
    background: lightgrey;
    color: black;
    height: 100%;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}
<footer>
        <ul>
            <li>
                <div>
                    <a href="http://google.fr">First</a>
                </div>
                <div>
                    <a href="http://google.fr">Second, large, full of text element</a>
                </div>
            </li>
            <li class="centered">
                <div>
                    <a href="http://google.fr">Centered element</a>
                </div>
            </li>
        </ul>
    </footer>
Community
  • 1
  • 1
misorude
  • 3,381
  • 2
  • 9
  • 16
0

You can achieve that by using:

li.centered div {
    position: relative;
    left: 0;
    right: 0;
    transform: translateX(-50%);
}

I am aware that is not the most modern solution and I didn't use the flexbox but you don't need to create empty elements in this way.

lukbrt
  • 308
  • 3
  • 8