Dealing with a problem in CSS Flexbox while aligning child elements using the `align-self`

Check out this test code here - https://jsfiddle.net/8dgeh9r3/1/

I have set up two scenarios to simulate. In the first scenario, there is a main parent flex container with multiple intermediary parents (which are also flex boxes that inherit properties from the top), and finally a child item. The main parent sets align-items to flex-start, but the last child should have align-self of flex-end. However, it doesn't seem to be functioning as expected.

In the second scenario, I created a case where there are no intermediate parents, just the main parent and its single child item. The flex styles still do not seem to take effect.

NOTE: My goal is for the child item(s) to align horizontally along the axis from left to right.

What could be the issue here?

htmlcssflexbox

Answer №1

From what I gather, your goal is to horizontally align the first item, but align-self primarily deals with vertical alignment of items. To achieve horizontal alignment, you should utilize the justify-content property on the container. Additionally, adjusting margins can also be helpful in achieving the desired layout.

Answer №2

According to @Louis Serre's response:

The objective is to horizontally align the first item, but the align-self property is typically used for vertical alignment.

To achieve the desired outcome, you should modify the flex-direction to column, particularly for Case 2. However, Case 1 may necessitate further consideration.

.parent1 {
  display: flex;
  align-items: flex-start;
  width: 90%;
  outline: 1px solid red;
  margin: 10px;
  flex-direction: column;
  flex-wrap: nowrap;
}
.child1 {
  align-self: flex-end;
  background-color: orange;
  width: auto;
  height: 60px;
}
<!-- case 2: Single parent -->
<div class='parent1'>
  <div class='child1'>
    <p>This is item 1</p>
  </div>
  <!--<div class='child1'><p>This is item 2</p></div>-->
</div>

Please be aware: this adjustment could impact other elements of your layout, so its suitability will depend on the overall design of your project.

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

ScrollReveal.js won't function as intended

https://i.stack.imgur.com/SOQEk.png Looking to utilize the popular ScrollReveal.js created by Julian Lloyd (ScrollReveal) Despite following instructions from various sources, the script is not producing the intended effect. Steps taken to make it work: ...

javascriptcss

I would like to automatically log out when closing the tab in Mozilla, Internet Explorer 8.0, or Chrome

Hello there, I was wondering if it's feasible to end the session and log out when I close my tab. I'd appreciate it if you could confirm whether this feature has been implemented on your end. Thank you, Manish ...

phpjavascripthtml

Issue with the image posting function in Laravel - why isn't it functioning properly?

Looking for Assistance I've been working on a simple web application using Laravel 6.0 and have encountered an issue with the image post function I developed. Despite not receiving any error messages, the functionality doesn't seem to be work ...

phphtmllaravel

Prevent border duplication in CSS and retain border visibility

Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, ...

htmlcssborder

Remove the ID, class, and other attributes from an HTML string using JavaScript for sanitization purposes

Can someone help me with sanitizing HTML text provided by a user? The HTML code in question is as follows: var htmlStr = `<p id="test" class="mydemo">TEhis is test</p> <pre class="css"> &lt;html> &lt;body cl ...

javascripthtml

Tips for displaying and hiding content in Angular2

I have a component that toggles the visibility of elements by clicking a button. This is the snippet of my HTML code: <div *ngFor="let history of histories | sortdate: '-dateModified'"> <p><b>{{ history.remarks }}</b& ...

htmlangular

What significance do the blank quotes hold in terms of value?

Is it possible to enter multiple values for the "favoriteCities" field since the value is empty? <input name="favoriteCities[]" value=""/> ...

html

Ways to stop two JavaScript files from running at the same time

After combining two JavaScript files, I am facing some issues. The first file handles validation while the second one has an ajax plugin for form submission after validation. When I include these files in the header section, they both run simultaneously. H ...

javascriptjqueryhtmlajaxvalidation

Ways to center text vertically within a cell in a Bootstrap 5 table

I am trying to achieve vertical alignment in one of the cells of a table I created. According to the Bootstrap 5 documentation, the vertical-alignment utilities only affect certain elements like inline, inline-block, inline-table, and table cell elements. ...

htmlcsstwitter-bootstrapbootstrap-5

Customizing Mat Horizontal Stepper Icons with Unique Background Colors in Angular Material

I'm having trouble customizing the colors of the icons In my mat-horizontal-stepper, I have five mat-steps (Part A, Part B ... Part E), each needing a different color based on certain business rules. While I can change the color for all steps or the ...

cssangulartypescriptangular-materialangular-material-stepper

Different width, same height - images arranged side by side in a responsive layout

The problem lies in the images: https://i.sstatic.net/rydNO.png Here is an example of desktop resolution: https://i.sstatic.net/uv6KT.png I need to use default size pictures (800x450px) on the server. This means I have to resize and crop them with CSS to ...

javascriptjqueryhtmlcssimage

What is the method to process a JSON path containing a special character like "@"?

I'm attempting to retrieve JSON data from an API with the following structure. My current approach involves using JavaScript. The code snippet I have utilized is displayed below. <p>"stations": [</p> <p id="data"></p> ...

javascriptjqueryhtmljson

Tips on dividing a div into two separate pages when converting to PDF

I am working on an asp.net MVC project and I need to convert a HTML div into a PDF with two separate pages. Here is an example of my code: HTML Code <div class="row" id="mycanvas"> <p>This is the first part of my content.</p> <p ...

javascriptjqueryhtmlcss

Hovering Div Issue

I have two divs named me and bubble nested within another div called holder. I am trying to trigger an action when a user hovers over the holder div. Strangely, the action works properly when I hover over me, but it doesn't seem to register when I hov ...

jqueryhtmlhover

No feedback received after sending keys using Selenium

Whenever I execute my code using PhantomJS and Selenium, the result appears to be correct. However, when it comes to using send_keys function, the code gets stuck without any errors, answers, or progress. I am puzzled and eager to find out why this is ha ...

pythonhtmlseleniumphantomjs

Making a secure connection using AJAX and PHP to insert a new row into the database

Explaining this process might be a bit tricky, and I'm not sure if you all will be able to assist me, but I'll give it my best shot. Here's the sequence of steps I want the user to follow: User clicks on an image (either 'cowboys&apos ...

phpjavascripthtmlajaxfunction

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

javascriptjquerycss

Display HTML content repeatedly depending on the number selected in a dropdown menu using AngularJS

I need your assistance with a dropdown selection feature on my website. The idea is that based on the number chosen from the dropdown, I want to dynamically repeat sections in HTML. For example, if I select 3 from the dropdown menu, the page should display ...

javascripthtmlangularjs

Challenges with organizing content using spans in Bootstrap 3

Looking for some help with TB3 here. I've created a jsFiddle to showcase my attempt at building a small minitron, which is essentially a mini jumbotron. https://i.sstatic.net/VxruB.png The idea is to have each 'minitron' contained within a ...

csstwitter-bootstrap-3

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

htmlcsshovercss-selectors