To align a div or text to the right using inline-flex, simply

I am facing an issue with aligning my animated links to the right. Currently, I am using display: inline-flex, which works well but doesn't align the links properly. I have tried using float: right for alignment, but I feel there must be a better way to achieve this.

I experimented with justify-content: flex-end; but it doesn't seem to work with inline-flex. I am open to switching to display: flex, but the problem is that it stretches my links to 100% width, which is not desirable. I couldn't find a solution to prevent this from happening.

I'm currently stuck on how to best handle this situation. If anyone has any insights or suggestions on how to resolve this issue effectively, I would greatly appreciate it. You can view the link styling in action on this CodePen:

Link: https://codepen.io/moy/pen/rNjbrYL

Thank you in advance for your help!

htmlcssflexbox

Answer №1

Alright, we've attempted this method where all links are contained within the div and you define the CSS for your specific div as follows:

display: flex;
flex-direction: column;
align-items: flex-end;

Answer №2

All the elements should be wrapped inside a container that has display: inline-flex

Here is the HTML structure:

<div class="links-container">

  <a href="#" class="link">
    <span class="link__label">
      We Definitely Don’t Include..
    </span>
  </a>

  <a href="#" class="link link--core">
    <span class="link__label">
      Follow Us
    </span>
  </a>

  <a href="#" class="link link--core align-right">
    <span class="link__label">
      Align to the Right?
    </span>
  </a>
  
</div>

And here is the corresponding SCSS code:

.links-container {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

This is part of the rest of your SCSS styles:

/* Global */

$blue: #0000c3;
$yellow: #f0f10d;

body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 60px;
  max-width: 1000px;
}
...

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

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

html displaying dynamic data in a table

As a beginner in coding, I am attempting to create a dynamic table. The first column is working fine with each new cell being added to the top. However, when I try to add columns, they fill from top to bottom instead of mirroring the first column. I want m ...

javascripthtml

Measuring dimensions with HTML on the server - how to do it?

I am facing a challenge with my web application that allows users to upload entire .html files to the server. I am looking for a way to automatically detect and store the width/height of the uploaded html in my database. Currently, I have been experimenti ...

html.netwebbrowser-control

Adaptable/Responsive Layout

Thank you for taking the time to look at this post. I am currently working on gaining experience with html, CSS, and JavaScript in hopes of entering the Front End Developer field. Today, I encountered a few issues while working on this adaptive design. He ...

htmlcssresponsive-design

Python Selenium is having trouble finding the elements

I've been struggling for hours to extract the specific text from a variety of elements on a website. I attached 2 images in hopes that they will help in identifying these elements by their similarities, such as having the same class name. The black un ...

pythonhtmlseleniumselenium-chromedriver

Unable to incorporate additional functions while using directives

http://example.com Is there a way to incorporate an addChild(tree) function into this code in order to expand the data array? I have made changes to the template as shown below: '<p>{{ family.name }}{{test }}</p>'+ '<ul>& ...

angularjshtml

Looping through PHP to set the background color of a map

A basic code I have writes out a 'map' or grid. My goal is to define specific areas - for example, if the value for $i or $j equals 1, it should mark the edge of my 'map' by setting the cell's class to 'edge', which curre ...

phphtmldictionaryhtml-table

The content within a select tag is experiencing vertical misalignment

The select tag on my page is behaving oddly - when there is a value in it, it is aligned to the bottom vertically. Upon inspecting the CSS, I noticed that the only styles applied are font size and type. Strangely, removing the doctype from the page resol ...

htmlcsshtml-select

Create an animated hamburger menu using Tailwind CSS and Angular framework

Within my Angular project, I have successfully integrated Tailwind UI to handle the opening and closing of the hamburger menu by utilizing the code below: <header> <div class="-mr-2 -my-2 md:hidden"> <button type="button ...

cssangulartailwind-css

Element with negative z-index overlapping background of parent element

I am currently working on creating a CSS3 animated menu, but I am facing an issue where elements with low z-index values are displaying on top of their containing elements. This is causing the "sliding out" effect to be ruined. Here is the HTML: <html ...

htmlcss

The rating and comment section is failing to adapt to smaller screens, creating a terrible user experience

I am a beginner with Sass and CSS. I wanted to create a rating and comment section which looks fine on a laptop screen, but appears off on smaller screens. It seems like the layout might be incorrect or maybe I didn't follow grid layout guidelines pro ...

cssbootstrap-4sass

Position a div container to be aligned at the bottom of an image

I'm having trouble aligning a div container at the bottom of an image. I attempted to modify the position attribute of the image and set its value to "relative." It's a bit challenging to explain, but here are snippets of HTML and CSS code with ...

htmlcss

EJS unable to display template content

I am having an issue with rendering a template that contains the following code block: <% if(type === 'Not Within Specifications'){ %> <% if(Length !== undefined) { %><h5>Length: <%= Length %> </h5> <% ...

javascripthtmlejs

Tips for adjusting image hues in Internet Explorer?

I have successfully altered the colors of PNG images in Chrome and Firefox using CSS3. Here is my code: #second_image{ -webkit-filter: hue-rotate(59deg); filter: hue-rotate(59deg); } <img src='http://i.im ...

javascriptjquerycssinternet-explorer

Obtaining the width of a scrollbar using JavaScript in the most recent version of Chrome

Looking for a way to determine the width of the scrollbar using JavaScript for CSS purposes. I attempted the following: document.documentElement.style.setProperty('--scrollbar-width', (document.offsetWidth - document.clientWidth) + "px" ...

javascripthtmlcss

What specific features does CSS3 offer in terms of background-size properties?

Let's delve into my knowledge: $, like in font-size: 14$; em, as in margin: 2em; What other units are out there? ...

css

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

Learn the process of seamlessly playing multiple video files in an HTML format

I am working with multiple video files and I need them to play continuously. The goal is to seamlessly transition from one video to the next without any interruptions on the screen. Below is my current code snippet: -HTML <button onclick="playVi ...

javascripthtml

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

Can a personalized user permission prompt be designed for HTML5 APIs?

Can a consistent custom user permission request dialog be designed for HTML5 APIs, such as geolocation or getUserMedia, to ensure uniform appearance on all browsers? ...

htmlgeolocationmultiple-browsersgetusermedia