How to Position a single component at end in flex with direction column?

Question

I want to position the footer element at the end of the page {body is display: flex; flex-direction: column;} but when I add justify-self: flex-end in footer, it doesn't work correctly as it did when flex direction is row.

How can i do it?

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ff0;
}
header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-items: center;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 0.5rem 0;
}
header span.logo {
    font-size: 1.75rem;
    font-weight: 500;
}
header svg {
    position: absolute;
    right: 5%;
}
footer {
    text-align: center;
    padding: 0.5rem 0;
    font-size: 14px;
}

<header>
    <span class="logo">deCoding</span>
    <svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
        <path />.........</svg>
</header>
<nav>
    <a href="#" class="nav-link-2">Catogary</a>
    <a href="#" class="nav-link-3">Catogary</a>
    <a href="#" class="nav-link-7">Catogary</a>
</nav>
<footer>Copyright &copy; 2020 deCoding</footer>

score 1 · Accepted Answer · answered Oct 24 '20 at 07:00

you can use on footer margin-top:auto or you add flex:1 on the div before the footer like here its the nav

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ff0;
}
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  justify-items: center;
  align-items: center;
  justify-content: center;
  height: fit-content;
  padding: 0.5rem 0;
}
header span.logo {
  font-size: 1.75rem;
  font-weight: 500;
}
header svg {
  position: absolute;
  right: 5%;
}
footer {
margin-top:auto;
  text-align: center;
  padding: 0.5rem 0;
  font-size: 14px;
}

<body>
<header>
  <span class="logo">deCoding</span>
  <svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
    <path />.........</svg>
</header> 
<nav>
  <a href="#" class="nav-link-2">Catogary</a>
  <a href="#" class="nav-link-3">Catogary</a>
  <a href="#" class="nav-link-7">Catogary</a>
</nav> 
<footer>Copyright &copy; 2020 deCoding</footer>
</body>

score 0 · Answer 2 · answered Oct 24 '20 at 06:58

0

Adding

flex: 1 1 auto;

To your nav should solve the issue.

nav {
  flex: 1 1 auto;
}

answered Oct 24 '20 at 06:58

huan feng

7,307
2
32
56

54ka · Answer 3 · 2020-10-24T07:16:14.720

I hope I understood the question correctly!

Option 1: If you have a DIV element are the content - you can set a minimum height

Option 2: Add nav::after element

Option 3: Add position: absolute; bottom: 0px; on element footer

Option 4: Add flex: auto; on the last element before footer

Option 1

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ccc;
}

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-items: center;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 0.5rem 0;
}

header span.logo {
    font-size: 1.75rem;
    font-weight: 500;
}

header svg {
    position: absolute;
    right: 5%;
}


.content {
    min-height: 90vh;
}

footer {
    text-align: center;
    padding: 0.5rem 0;
    font-size: 14px;
}

<header>
    <span class="logo">deCoding</span>
    <svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
        <path />.........</svg>
</header>

<nav>
    <a href="#" class="nav-link-2">Catogary</a>
    <a href="#" class="nav-link-3">Catogary</a>
    <a href="#" class="nav-link-7">Catogary</a>
</nav>

<div class="content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus reiciendis sunt dolorum natus! Vel, eos autem, voluptatem labore modi sint dolor deserunt cumque error officia totam atque accusamus temporibus porro.
</div>

<footer>Copyright &copy; 2020 deCoding</footer>

Option 2

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: #ccc;
}

header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    justify-items: center;
    align-items: center;
    justify-content: center;
    height: fit-content;
    padding: 0.5rem 0;
}

header span.logo {
    font-size: 1.75rem;
    font-weight: 500;
}

header svg {
    position: absolute;
    right: 5%;
}


footer {
    text-align: center;
    padding: 0.5rem 0;
    font-size: 14px;
}

nav::after {
    content: '';
    display: block;
    min-height: 90vh;
}

<header>
    <span class="logo">deCoding</span>
    <svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
        <path />.........</svg>
</header>

<nav>
    <a href="#" class="nav-link-2">Catogary</a>
    <a href="#" class="nav-link-3">Catogary</a>
    <a href="#" class="nav-link-7">Catogary</a>
</nav>

<footer>Copyright &copy; 2020 deCoding</footer>

score -1 · Answer 4 · answered Oct 24 '20 at 06:59

Do you want like that way...I have added position:absolute in footer.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #ff0;
  position: relative;
}
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  justify-content: center;
  height: fit-content;
  padding: 0.5rem 0;
}
header span.logo {
  font-size: 1.75rem;
  font-weight: 500;
}
header svg {
  position: absolute;
  right: 5%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
  text-align: center;
  padding: 0.5rem 0;
  font-size: 14px;
}

<header>
  <span class="logo">deCoding</span>
  <svg class="account-button" width="34" height="40" viewBox="0 0 34 40" fill="none">
    <path />.........</svg>
</header> 
<nav>
  <a href="#" class="nav-link-2">Catogary</a>
  <a href="#" class="nav-link-3">Catogary</a>
  <a href="#" class="nav-link-7">Catogary</a>
</nav> 
<footer>Copyright &copy; 2020 deCoding</footer>

How to Position a single component at end in flex with direction column?

4 Answers4