Tips for aligning links to the right using flexbox

Is there a way to reposition the about and contact links on the right side of the navigation section?

I attempted using align-items: flex-end, but it doesn't seem to have any effect.

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 25px;
}


/* Navigation */

.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.footer-items {
  display: flex;
  justify-content: center;
}
<!-- Container -->
<div class="container">
  <!-- Navigation -->
  <div class="navigation-container">
    <span class="background"></span>
    <!-- Results Nav-->
    <span class="navigation-items" id="resultsNav">
      <h3>About</h3>
      <h3>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</h3>
      <h3>Contact</h3>
    </span>
  </div>
</div>

htmlcssflexbox

Answer №1

Here is a handy JSFiddle I put together:

https://jsfiddle.net/uniqueuser123/abc123def456/

This is the CSS styling I used:

.wrap {  position: relative;  display: flex;  margin-top: 5px;  margin-bottom: 25px;}
.nav-container {  width: 100%;}
.nav-items {  display: flex;  justify-content: flex-end;}

Problem solved!

Answer №2

I discovered two possible solutions:

If you are already using position: fixed; for your .navigation-container, you can simply include right: 0; to align it to the right side.

.navigation-container {
  position: fixed;
  top: 0;
  right: 0;
}

Alternatively, you can set your navigation-container element to be 100% wide. Then, apply some flex properties like so, to ensure that the children align to the right.

.navigation-container {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

Answer №3

When utilizing the flex-direction:column property, keep in mind that justify-content controls vertical alignment and align-items controls horizontal alignment.

This snippet clearly demonstrates how align-items functions as expected.

It is important to note that if you apply align-items to a child within the .container, the alignment change may not be noticeable unless the child's width (e.g., .navigation-container) is set to flex:1 to fill its parent's width.

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 25px;
  align-items: flex-end;
}

/* Navigation */
.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}
<!-- Container -->
<div class="container">
  <!-- Navigation -->
  <div class="navigation-container">
    <span class="background"></span>
    <!-- Results Nav-->
    <span class="navigation-items" id="resultsNav">
      <h3>About</h3>
      <h3>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</h3>
      <h3>Contact</h3>
    </span>
  </div>
</div>

Answer №4

In order to properly align the end of the div parent, you need to ensure that it has a width of 100%. You can achieve this by applying the following CSS:

.navigation-container{
    width:100%;
}

.navigation-items{
    justify-content: flex-end;
}

Answer №5

To ensure proper alignment, simply include align-items: flex-end; in the properties of the flex container.

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 5px;
  margin-bottom: 25px;
  align-items: flex-end;
}


/* Navigation */

.navigation-container {
  position: fixed;
  top: 0;
}

.navigation-items {
  display: flex;
  justify-content: center;
}

.footer-items {
  display: flex;
  justify-content: center;
}
<!-- Container -->
<div class="container">
  <!-- Navigation -->
  <div class="navigation-container">
    <span class="background"></span>
    <!-- Results Nav-->
    <span class="navigation-items" id="resultsNav">
      <h3>About</h3>
      <h3>&nbsp;&nbsp;&nbsp;•&nbsp;&nbsp;&nbsp;</h3>
      <h3>Contact</h3>
    </span>
  </div>
</div>

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

Ways to retrieve all elements, including those that are hidden, within a CSS grid

My goal is to retrieve all the "Available Items" using Javascript in one go. However, I am facing an issue where not all of them are visible at once due to the need to manually scroll through a CSS grid. <div class="gridWrapper" data-dojo-attach-point= ...

javascripthtmlcsspython-3.xselenium

PHP function that allows toggling only the first item in an accordion

In my function.php file in WordPress, I have the following code that is called using a shortcode on certain pages. It loops through and displays FAQs stored with each post. However, I am facing an issue where only the first accordion item can be toggled, ...

phphtmlcsswordpress

DaisyUI nested collapse components featuring a dropdown menu

Here's an update following the discussion in this thread. I've implemented the solution suggested there into my Vue component, modified the collapse section, and turned it into a nested collapse with multiple collapse elements nested inside. The ...

cssvue.jstailwind-cssdaisyui

Background images will not display in a repeating manner on a mobile browser

I am currently facing an issue where I have two backgrounds, one as an image without repeating and the second with repeating in both x and y axis. Everything displays correctly on PC, but on mobile browsers the second image only repeats on the x axis. Here ...

htmlcssmobilebrowserbackground

The values from the form fields are not being properly transferred into the JSON object

Check out my JSFiddle here: https://jsfiddle.net/inchrvndr/7pwh9p8g/ When you click the "+" button, the bordered form elements are getting cloned. All the values of the cloned form elements are being passed into JSON data except for the parent element fr ...

javascriptjqueryhtmlcssjson

Creating a dynamic matrix layout with CSS

On my e-commerce site's product display page, I am facing some alignment issues. There will be around 100 products on this page and I want to display them in a matrix format. <div style=" margin: 0 auto; width:640px; text-align: left"> &l ...

htmlcss

The textarea field activates a select event listener whenever a button or link is clicked within the DOM

My DOM structure is pretty straightforward, consisting of a textarea, some buttons, and links. I've attached a select eventlistener to the textarea to monitor text selection by the user. const summary = document.getElementById("summary"); summary?. ...

javascripthtmlevent-listener

A dynamic Java web framework that combines RESTful JSON services with the power of HTML5 and jQuery AJAX functionality

As we approach the year 2013, the era of HTML5, jQuery has solidified itself as the go-to standard for web Javascript development. Back in 2010, this link was quite popular: I am searching for a Java web framework that can expose domain classes through R ...

javajqueryjsonhtmlrest

Menu Tabs with Rounded Edges

Seeking help to round the corners of a tabbed dynamic menu using Drupal and the dynamic-persistent-menu module. The code provided below is almost perfect, with 99% accuracy. View the current state of the menu here: . Can anyone assist in achieving the rema ...

cssimagebackground

Certain Android versions are experiencing difficulties with playing live stream videos, with HTML5 video not being detected

Currently, I am working on a website that offers live streams. I have been utilizing CDNSun services and have switched from JwPlayer to FlowPlayer HTML5. Setting up my code through the CDNSUN help section (How To) has allowed the live streams and other vid ...

htmlvideo-streamingrtmplive-streamingflowplayer

Having trouble making the jQuery "simulate width: calc(100%)" function work properly?

I am utilizing a combination of HTML, CSS, mediaQuery, Javascript, jQuery, and PrimeFaces in my project. One particular css property I want to use is: calc(100% - 100px) To handle old browsers that do not support this property, I have implemented a javas ...

javascriptjqueryhtmlcss

HTML with embedded PHP script

i cannot seem to display mysql data in html format. the table i am working with is called App appid | app | version | date | apk file | 1 sample 1.0.0 2012-10-12 sample.apk //here is the mysql query ...

phphtmlmysql

HTML Email Display Issue in Outlook

I created an email template that displays correctly in other email clients, but Outlook is distorting the inner div. I have specified a width of 920px for my inner div, but it's not taking effect in Outlook. I attempted this solution from Stack Overfl ...

htmlcssoutlook

What is the method for creating a shape similar to this using border radius?

To see what I have created so far, click here. <div class="tv">13.3"</div> I am looking to replicate this design exactly. ...

csscss-shapes

What is the best way to create eye-catching animations on a website using either Wordpress or W

I am a newcomer to Wordpress and have recently taken on a project to create a website similar to . Upon opening the site, you can see various animations at the top. I am unsure whether these animations are created using a specific plugin or custom code. An ...

csswordpressanimationvelo

What are the best strategies for optimizing my CSS drop down menu to be both responsive and mobile-friendly?

I am struggling to make my current CSS and HTML menu fully responsive and mobile-friendly. I have researched solutions from other sources but have been unable to implement them successfully. I am seeking help in modifying my menu so that it adjusts to smal ...

htmlcssdrop-down-menuresponsive-design

What is the best way to determine if a radio button has been chosen, and proceed to the next radio button to display varied information?

The goal is to display the <div class="resp"> below each radio button when it is selected, with different content in each <div class="resp">. The previously selected <div class="resp"> should be hidden when a new radio button is chosen. O ...

javascriptjqueryhtmlradio-button

An effective method for targeting a specific button within a CSS file

I have multiple button tags in my code, but I need to style a specific one using CSS. How can I target this particular button and apply styles only to it while leaving the others unchanged? Do I need to assign the button to a variable and reference that va ...

javascripthtmlcssangular

Tips for deleting a CSS class from a Wicket element

If you're looking to dynamically update a CSS class of a component in Java code, one way to do so is by using an AttributeAppender: component.add(new AttributeAppender("class", true, new Model<String>("foo"), " ")); You can also utilize a util ...

javacsswicket

The scroll feature is not functioning properly in detecting the CSS function for the final div

$(document).ready(function() { $(document).on("scroll", onScroll); //smoothscroll $('a[href^="#"]').on('click', function(e) { e.preventDefault(); $(document).off("scroll"); $('a').each(func ...

javascriptjqueryhtmlcss