CODEWITHSUNDEEP
cssflexbox
Labanino
Labanino

Reputation: 3960

Creating a footer using flexbox

I've been trying really hard to do this but I'm really y confused. I trying to create the footer of this site without using floats, with flex. Basically, I have three sets of <ul>, one for Navigation, one for Follow Us, and another one for Contact. Again, I know how to do this with regular css using floats, the challenge is my flex, not good enough.

enter image description here

Upvotes: 0

Views: 11811

Answers (3)

Bishal RaEe
Bishal RaEe

Reputation: 97

do this to make responsive:

`

@media(max-width: 500px){

  footer{
    flex-direction:column;
  }
}

`

Upvotes: 2

Aseem Khan
Aseem Khan

Reputation: 11

It is very simple, You just have to use display : flex & Justify-content : Space-between here is the code for you to better understand

`<!DOCTYPE html>
<html lang="en">
<head>
<title>Good Luck</title>
<style>
  footer {
    display: flex;
    justify-content: space-between;
  }
</style>
</head>
 <body>
  <footer>
    <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
  <ul>
    <li>E</li>
    <li>F</li>
    <li>G</li>
  </ul>
  <ul>
    <li>H</li>
    <li>I</li>
    <li>J</li>
  </ul>
    </footer>
</body>
</html>'

Upvotes: 0

Victor Santizo
Victor Santizo

Reputation: 1171

A div was added in order to group each list in a different container. Making the divs the only flex items.

<footer> 
  <div>
    <h2 class="footer__headline">Navigation</h2>
    <ul class="footer__list">
      <li>nav 1</li>
      <li>nav 2</li>
      <li>nav 3</li>
      <li>nav 4</li>
      <li>nav 5</li>
      <li>nav 6</li>
      <li>nav 7</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Follow Us</h2>
    <ul class="footer__list">
      <li>social 1</li>
      <li>social 2</li>
      <li>social 3</li>
    </ul>
  </div>
  <div>
    <h2 class="footer__headline">Contact</h2>
    <ul class="footer__list">
      <li>Adress</li>
      <li>Phone</li>
      <li>Email</li>
      <li>Website</li>
    </ul>
  </div>
</footer>

On CSS, all you have to do is apply on the footer display:flex and justify-content. justify-content will align the list's containers depending on the attribute (space-between, space-around, center, etc) used, in this case space-around, which will assign an equal space on each side of the flex items. You could also use margins to separate the container. After having all the content arranged, we only have to remove the padding and default style from the uls

footer {
  display: flex;
  justify-content: space-around;
}

.footer__headline {
  font-weight: bold;
  font-family: 'Helvetica';
}

.footer__list {
  font-family: 'Helvetica';
  list-style: none;
  padding: 0;
  margin: 0;
}

Upvotes: 3

Related Questions