Why does the flex-start and flex-end values correspond to the top and bottom positions when using the flex-direction property set

I am attempting to organize text and buttons into a row, with the buttons aligned on the right side and the text on the left side.

My approach involves creating a flexbox layout and assigning items the appropriate classes for alignment.

html, body { width: 100%; }

.flexbox {
    flex-direction: row;
    width: 100%;
    display: flex;
    align-items: center;
}

.right {
    align-self: flex-end;
}

.left {
    align-self: flex-start;
}
<div class="flexbox" *ngFor="let a of api.active_articles">
    <a class="left">{{a.nameDe}}/{{a.nameIt}}</a>
    <a class="left">{{a.descriptionDe}}/{{a.descriptionIt}}</a>
    <button class="right" id="edit">Edit</button>
    <button class="right" id="delete">Delete</button>
</div>

Initially, I assumed that setting flex-direction to row would align items from left to right within the div. However, this wasn't the case as it placed the left items at the top and the right items at the bottom, both horizontally aligned without proper distinction.

Answer №1

align-self affects the cross-axis, providing vertical alignment in a row layout.

The align-self CSS property overrides the align-items value of a grid or flex item. In Grid, it aligns the item within the grid area. In Flexbox, it aligns the item on the cross axis.

You may have intended to use justify-self, but this doesn't impact a flex row.

This property is disregarded in flexbox layouts.

To position buttons on the right side, you can utilize the margin-left:auto option.

html, body { width: 100%; }

.flexbox {
    flex-direction: row;
    width: 100%;
    display: flex;
    align-items: center;
}

#edit {
  margin-left:auto;
}
<div class="flexbox" *ngFor="let a of api.active_articles">
    <a class="left">Name</a>
    <a class="left">Description</a>
    <button class="right" id="edit">Edit</button>
    <button class="right" id="delete">Delete</button>
</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

AngularJS directive does not trigger when switching tabs or scrolling pages

I came across a solution to display a placeholder image before the real image fully loads while browsing online here. I implemented the code provided in the accepted answer on my page, where I have two tabs using `ion-slide-box` for tab selection. Each tab ...

Is it possible to achieve 100% screen height by combining a fixed height div with a stretchy height div?

I have a design concept that I'm trying to bring to life. I'm struggling with figuring out how to add another "stretchy div" to the layout. I want this second div to expand to fill all remaining vertical space on the screen without causing it to ...

Change the CSS element if the current URL is not example.com/page1 or example.com/page2

When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...

Dynamic rows in an Angular 2 Material data table

I'm currently working on dynamically adding rows to an Angular 2 Data Table ( https://material.angular.io/components/table/overview) by utilizing a service called "ListService". This service provides me with the columns ("meta.attributes") to be displ ...

Show the checked options retrieved from controller

I am facing an issue with displaying certain checkbox values from the controller. In order to properly save these values, I believe it would be best to declare them in the controller and then use them in the HTML. However, my current code is not successful ...

What is the process for updating the background image in Ionic?

Currently facing an issue with setting an image for background in Ionic. The code provided doesn't seem to be working as expected. It appears that the style sheet is not being applied correctly. Not sure where exactly to add the style sheet or how to ...

The div reveals a submenu by popping out when its overflow is set to hidden

I am trying to figure out how to create a horizontal menu with sliding option and submenu. The issue arises when I set overflow to hidden for the sliding effect, as it causes problems with the submenu. Any suggestions or ideas on how to solve this dilemma ...

Trouble aligning items in a fieldset with Bootstrap

While working on a wire frame, I am attempting to create the HTML structure based on it. The required structure that needs to be built is outlined in this diagram: https://i.sstatic.net/ypp2f.png Progress has been made on aligning elements using a two-col ...

Error found in Google's privacy page HTML code

Reviewing the html code of Google's Privacy Page, I observed the following header: <!DOCTYPE html> <html lang="en"> <meta charset="utf-8> <title>Google Privacy Center</title> <link rel="stylesheet" href="//www.g ...

What is the best way to apply a box-shadow to a specific side of an element?

How can I apply a box shadow to only the right side of a block element? Currently, I achieve this by wrapping the inner element with a box-shadow in an outer element with padding-right and overflow:hidden to hide the other three sides of the shadow. Is the ...

Odd behavior observed in the Android browser while choosing input fields

When stacking modal elements in the Android Webkit browser (tested on versions 2.2, 2.3, and 3.0), strange behavior seems to occur. Take this example: Here, I have a jQuery UI date picker with z-index 200, a gray overlay div covering the entire document w ...

What is the importance of setting height: 0 when flex-basis: 0 is already defined in CSS3 flexbox?

I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure: .flex { display: flex; flex-direction: column; ...

The default value is not displayed in the Angular dropdown menu

When using regular html select menus, if you create an option element with selected and disabled attributes and provide text for that option, the text will be displayed by default in the select menu. Below is a basic example of HTML code: <select name= ...

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

Text cannot be highlighted within DIV element

Check out this page and this page on my website. Text within the advert DIV tag cannot be selected, and some text in the Incinerator product page is unselectable in the topic-div above the iframe element containing a YouTube video. Here is the relevant HT ...

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

I'm looking to customize the placeholder text in an input field. I want the main placeholder text to be in black and have a red star indicating it's a required field. However, my attempt to set the color of the star specifically to red using `::- ...

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4. https://i.sstatic.net/3eKwN.png From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than ...

Equal Sized <li> elements within Bootstrap Cards

I've been working with the following "template", and there are multiple cards like this on the settings page I'm currently developing. <!-- Card template --> <div class="card mt-3 shadow-sm"> <div class="card-hea ...

Align the image so that it is perfectly positioned along the lower edge of the window

I have been experimenting with parallax scrolling and resizing images using JavaScript. However, I am struggling to align my homepage perfectly with the edge of the window. The code I have doesn't line up with the bottom edge of the webpage. If I us ...