What is the best way to align every element in a single corner using Flexbox CSS?

My goal is to place a link in each corner (left, top, right, bottom) using Flexbox.

I attempted using top: 0 or adjusting the flex-direction to column.

.container {
  position: relative;
}

.top {
  display: flex;
  justify-content: space-between;
}

.bottom {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
<div class="container">
  <div class="top">
    <a href="one/">ONE</a>
    <a href="two/">TWO</a>
  </div>
  <div class="bottom">
    <a href="three/">THREE</a>
    <a href="four/">FOUR</a>
  </div>
</div>

I expected to achieve one link in each corner similar to this screenshot:

https://i.sstatic.net/Bl7sz.png

However, I ended up with this instead:

https://i.sstatic.net/M96eD.png

htmlcssflexbox

Answer №1

Here is a clean and straightforward flexbox solution with no hacks or absolute positioning:

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* for horizontal spacing */
  align-content: space-between;   /* for vertical spacing */
}

.top, .bottom {
  flex-basis: 100%;    /* forcing .bottom to wrap */
  display: flex;
  justify-content: space-between;
}

a {
  background-color: orange;
}

body {
  margin: 0;
  background-color: lightgray;
}
<div class="container">
  <div class="top">
    <a href="one/">ONE</a>
    <a href="two/">TWO</a>
  </div>
  <div class="bottom">
    <a href="three/">THREE</a>
    <a href="four/">FOUR</a>
  </div>
</div>

Answer №2

The reason for this behavior is due to the height settings on your bottom and top divs, which by default will only occupy the minimum content height. The same applies to the wrapper container as well.

To resolve this issue using flexbox, you can follow these steps: 

.container {
   height: 95vh;
   display: flex;
   flex-direction : column;
   justify-content: space-between;
}

.top {
   display: flex;
   justify-content: space-between;
}

.bottom {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
}
<div class="container">
    <div class="top">
        <a href="one/">ONE</a>
        <a href="two/">TWO</a>
    </div>
    <div class="bottom">
        <a href="three/">THREE</a>
        <a href="four/">FOUR</a>
    </div>
</div>

Answer №3

Using Flexbox eliminates the need for using .top & .bottom classes, resulting in cleaner HTML code.

<style>
.container {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    height: 100%;
}

.container a {
    flex: 1 1 50%;
}

.container a:nth-child(2n) {
    text-align: right;
}

.container a:nth-child(3),
.container a:nth-child(4) {
    align-self: flex-end;
}


<div class="container">
    <a href="#">ONE</a>
    <a href="#">TWO</a>
    <a href="#">THREE</a>
    <a href="#">FOUR</a>
</div>

Answer №4

In cases like this, it may be more suitable to use position: absolute;.

.wrapper { position: relative; }

.top-left-corner { position: absolute; top: 0; left: 0 }

.top-right-corner { position: absolute; top: 0; right: 0 }

.bottom-left-corner { position: absolute; bottom: 0; left: 0 }

.bottom-right-corner { position: absolute; bottom: 0; right: 0 }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the method used to create the scrolling effect on this website?

I am in the process of creating my own personal website and I would like it to function similar to the following example: Instead of the typical scrolling, I'm interested in transitioning between different sections on the page. Could this be achieved ...

javascriptjqueryhtmlcss

Can you explain the distinction between escapeXml and escapeHtml functions?

When it comes to escaping characters in JSP pages, I am wondering which is the better option - using escapeXml or escapeHtml? ...

htmlxmljspescaping

Textarea is limited to resizing just one specific area

I've been experiencing issues with my textareas. The problem arises when I try to have multiple textareas that need to resize on page load. It seems to work well for the first textarea, but as soon as I insert another one, only the first one responds ...

javascripthtmlcsstextarea

How can the 'selected' attribute be assigned to 'select/option' tags depending on the option value?

In my code, I have a select input with various options and values. I want to set the 'selected' attribute for the option that corresponds to a specific value X. Here is an example: // If x=3, I want the option with value=3 to be marked as 's ...

javascripthtml

Is there a way for me to retrieve the icons through a content query?

Currently, I am working on customizing a background slider. However, in the CSS file: span.cbp-binext:before { content: "\e000";} The issue I am facing is that I am only getting squares as icons. Is there a way for me to replace these squares with a ...

javascriptcsshtml

Obtain and display pictures in HTML

I am working on a code snippet that fetches images from a directory and displays them in HTML. The issue I'm facing is that the images in the directory keep changing every second, causing problems on mobile browsers where the cached images are not bei ...

javascriptandroidhtmlimageviewer

Can you explain the distinction between place-items and align-items?

Wondering about the distinction between using display: flex; align-items: center; versus display: flex; place-items: center; Although they look similar visually, it's worth noting that place-items has 90% browser support while align-items has 92%. ...

htmlcss

Is it possible to adjust the background color based on the current time of day?

I have successfully designed a visually appealing website using HTML5, CSS, and Bootstrap. I am interested in finding a way to automatically change the background color and navigation bar selection color based on the time of day - blue during the day and d ...

javascripthtmlcssbootstrap-4

Incorporating a Menu within a TableCell using Material-UI

I have a desire to incorporate Google's Material UI Menu Item inside a TableCell, following their documentation guidelines here in this illustration: https://i.stack.imgur.com/IffEM.png This is my current method: import React from 'react' ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to append an HTML element located by its ID to the body of a webpage

Is there a way to insert a DOM element with a specific ID into the body tag while clearing out all existing body nodes? The following approach doesn't seem to be effective: var elem = document.getElementById("email"); document.body.innerHTML = elem; ...

javascripthtml

Tips for ensuring the alignment of a table header and body once data has been loaded into it

I am currently developing an Angular 7 application where I am trying to populate a table with data retrieved from a web service. However, the issue I am facing is that the headers of the table do not align properly with the body content after loading data ...

htmlcssangularbootstrap-4

Modifying CSS post-rendering to accommodate right-to-left or left-to-right text orientation

I have a unique single-page JavaScript website that retrieves text from a web request in JSON format. The direction of the text (RTL or LTR) is only determined once the response is received. Is there a method to re-render the page after receiving the res ...

css

Obtaining data from a website with Java: A step-by-step guide

I am trying to retrieve the SIC Code from the following URL: . However, when I run my code, I encounter the following error: public static void main(String[] args) { try { Document doc = Jsoup.connect("http://www.manta.com/c/mx4s4sw/bowflex-ac ...

javahtmlcss

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

javascriptcssviewport

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Is there a way to modify the image source upon clicking a button?

I am currently working on implementing an image swap functionality on a webpage. I need the image to change when a user clicks a button, but for some reason, my logic isn't working. I am more interested in understanding why it's not working and w ...

javascripthtml

The image slider script I've built is functioning perfectly in Codepen, but unfortunately, it's not working as

My image slider called Orbit is functioning properly on Codepen.io, however when I try to run the exact same code on Plunker, it doesn't work at all. <ul class="slider" data-orbit> <li> <img src="http://foundation.zurb.com/docs/a ...

javascriptjquerycss

Iterate through a list of items using ngFor directive in Angular, and

How can I apply an active class to the selected item in a ngFor loop without toggling it on every item? <div class="mb-2 item rounded bg-white border" *ngFor="let item of keys(); let i = index" (click)=&qu ...

htmlangular

The issue with Thymeleaf recursive function not functioning as expected

I am attempting to create a recursive list using Thymeleaf. I have a simple Java object that represents a node with a description and an array list of child nodes. However, my current HTML/Thymeleaf structure is not properly iterating through the nested le ...

htmlthymeleaf

Implement input validation in React by enhancing the functionality of HTML input tags

Below is the input provided: const REGEX_EMAIL_VALIDATION = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}&bsol ...

javascripthtmlreactjsregexvalidation