Trouble aligning items within a flex-wrap parent using CSS flex-item's align-self functionality

I am facing an issue with my flex parent container. It is set to flex-wrap: wrap and justify-content: flex-end. Within this container, there is a flex-child called button-group that I want to align to the left using align-self, but it seems to not be working as expected.

.container{
  width: 500px;
  height: 500px;
  background: pink;
  
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.button-group {
  background: lightblue;
  align-self: flex-start; /* Not working!*/
  padding: 5px 10px;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}
<div class="container">
 <div class="button-group">
  <button></button>
  <button></button>
  <button></button>
 </div>

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

How can I achieve the alignment of the button group to the left while keeping the flex wrap intact?

htmlcssflexbox

Answer №1

Flexbox arranges items in a single direction. This is why the flex-start did not produce the desired result.

To make it work, enclose it within a div and apply the necessary styles as demonstrated in the code snippet below:

.container {
  width: 500px;
  height: 500px;
  background: pink;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.button-group {
background: lightblue;
padding: 5px 10px;
display: inline-block;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}
.holder{width: 100%;}
<div class="container">
<div class="holder">
  <div class="button-group">
    <button>1</button>
    <button>2</button>
    <button>3</button>
  </div>
  </div>

  <div class="main-box"></div>
  <div class="myfooter"> </div>
</div>

Answer №2

To remove the margin on the right side of the button-group, you can utilize the CSS property .margin-right:auto; specifically on the .button-group element to ensure it aligns itself to the left.

.container{
  width: 500px;
  height: 500px;
  background: pink;
  
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.button-wrap {
  display: flex;
  flex-basis: 100%;
}
.button-group {
  background: lightblue;
  align-self: flex-start;
  padding: 5px 10px;
  margin-right: auto;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}
<div class="container">
  <div class="button-wrap">
    <div class="button-group">
    <button></button>
    <button></button>
    <button></button>
   </div>
  </div>
 

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

Answer №3

Give this a try. To create a button group, you'll need to wrap it in an additional container and apply the CSS properties display: flex; flex-basis: 100%; to that container.

Check out this example on JSFiddle

.container{
  width: 500px;
  height: 500px;
  background: pink;
  
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.button-wrap {
  display: flex;
  flex-basis: 100%;
}
.button-group {
  background: lightblue;
  align-self: flex-start; /* This doesn't seem to work!*/
  padding: 5px 10px;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
}
<div class="container">
  <div class="button-wrap">
    <div class="button-group">
    <button></button>
    <button></button>
    <button></button>
   </div>
  </div>
 

 <div class="main-box"></div>
 <div class="myfooter"> </div>
</div>

Answer №4

Let me explain what's happening here. By default, the flex-direction is set to row, so your child elements are positioned horizontally. However, if the container width is fixed and cannot expand to accommodate all child elements, it will push them down, making the layout appear vertical even though they are still placed horizontally. In this scenario (with flex-direction: row), the align-self property only affects the alignment of flex items in the vertical direction.

To resolve this issue, you should first change the flex-direction to column. Then you can use the align-self property to align your flex items horizontally.

.container{
  width: 500px;
  height: 500px;
  background: pink;
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
}

.button-group {
  background: lightblue;
  align-self: flex-start; /*Now it works correctly!*/
  padding: 5px 10px;
}

.main-box {
  width: 450px;
  height: 300px;
  background: lime;
  align-self: flex-end;
}

.myfooter {
  width: 50%;
  height: 10%;
  background-color: black;
  align-self: flex-end;
}
<div class="container">
 <div class="button-group">
  <button></button>
  <button></button>
  <button></button>
 </div>

 <div class="main-box"></div>
 <div class="myfooter"> </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

Restrict the width of an absolutely positioned element to the width of its

FIDDLE I have a situation where I need to position an element absolutely, like a drop-down menu. However, when the window is resized and becomes narrow, there is not enough space for it. My requirements are: - The right edge of the dropdown should not g ...

javascriptjqueryhtmlcss

Ways to layer two divs on each other and ensure button functionality is maintained

In the process of developing a ReactJS project, I encountered the challenge of overlapping my search bar autocomplete data with the result div located directly below it. For a more detailed understanding, please take a look at the provided image. Here&apo ...

javascriptreactjscss

What are the steps to create two frames using Twitter Bootstrap?

I'm just starting to work with Twitter Bootstrap and I need some help. Can someone assist me in creating a two-column layout inside the HTML, where the menu in the header stays visible even when scrolled down? I've included my HTML code below. Th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Strange behavior observed with CSS intellisense in Visual Code

While working on a ReactJS project, I noticed that when I opt for the style Jsx Attribute for inline CSS, . CSS intellisense seems to not work or only work after I manually add some fields. However, if I manually type the style attribute without using t ...

cssreactjsvisual-studio-codeintellisense

Using flex and align properties to position two elements on the right and one on the left is a common layout challenge

I'm facing an issue with element positioning and text alignment. The navigation container consists of three elements: logo, title, and nav-list. You can find the code on CodePen. /**{ margin: 0; padding: 0; box-sizing: ...

htmlcsscss-positiontext-alignment

What is the method for configuring the asp-for input tag helper to create camelCase names?

My view model is structured as follows: public class MyModel{ public DateTime? StartDate {get;set;} } When using an input tag on a view with the asp-for tag helper, the default HTML generated looks like this: <input type="datetime" id="StartD ...

htmlasp.net-core-mvctag-helpers

PHP: When MySQL is not returning results and an undefined variable is causing issues

Currently, I am engaged in a project where I need to fetch some data from the database and display it within a form. Although my SQL query seems correct when reviewed in the SQL log, MySQL is not returning any results. I am seeking assistance on how to ret ...

phphtmlmysql

Dynamic and uniform height for a group of containers

Imagine three boxes lined up, each with an image and a title inside. I can adjust the height using the height property to make them all the same height. However, in a Responsive view, when the boxes shrink, their fixed height can cause extra white space to ...

jquerycsshtml

What is the best way to align three divs side by side using HTML?

Hi there! I need help figuring out how to display 3 div elements inline with each other without resizing when the browser size changes. Can anyone provide some guidance on this? This is how it should look like: https://i.sstatic.net/pBRZr.png Code: bod ...

htmlcss

What could be causing the child nodes of a particular class to not inherit the specified style?

When dynamically adding div child nodes to a search field, I do it like this: <div id="recommand" class="recommand"></div> data.result.forEach(function(entry) { let cont: rcommand; cont.username = entry[0]; const x = ...

javascripthtmlangularclassparent-child

Display text when hovering over a button

My goal is to achieve something similar to the following: <button class="addMore">+</button> I want to create an effect like this: when the button is hovered over. I have searched for different solutions, but none of them match the exact be ...

htmlcss

Navigating through images within my application

When setting images, I encounter an issue where the second image overlaps the first one instead of appearing separately. How can I ensure that each image is displayed in its own box? I have attempted to use a blob directly by returning imgUrl in the showI ...

javascripthtmlreactjs

Reveal a hidden div sliding in from the left within a parent div that contains multiple divs with the same class

I have come across a situation where I have multiple divs containing several hidden divs. The goal is to reveal each hidden div when hovering over a specific link. The problem I am facing is that the current code shows and hides all hidden divs at once. W ...

javascriptjqueryhtml

Auto-adjusting height container following animation

Through javascript, I am able to adjust the height of my element from 0 to auto as I was unable to accomplish this using CSS. /* Function for animating height: auto */ function autoHeightAnimate(element, time){ var curHeight = element.height(), // Get ...

javascriptjqueryhtmlcssjquery-animate

Creating a responsive div with inner content is a simple task that can be accomplished without relying

I am looking to create a responsive div along with its inner content, so that the div adjusts in size as I resize the window without relying on bootstrap. An example of what I'm trying to achieve is shown below: <div id="mapImage1" class= ...

htmlcssresponsive

Adjusting the width of the Bootstrap input group-prepend/addon

I am encountering difficulties with ensuring that all prepend add-ons have the same width. The issue arises when using Font Awesome icons, as each prepend is sized according to its specific icon. I came across a similar thread from approximately one year a ...

htmlcssbootstrap-4

Struggling with html tag formatting with the help of hogan.js and typeahead.js

I'm currently using the script below: $('#Entity_Wall').typeahead({ name: 'walls', remote: "http://localhost/getsomestuff?text=%QUERY', limit: 10, template: '{{value}}<div class="te ...

csshogan.jstypeahead.js

Adjusting column width in Bootstrap grid when content is missing

Currently, I am encountering a problem with the grid system while attempting to create a kanban style drag and drop system. The issue is illustrated in the image below. Each card should be positioned according to the arrows shown. As the 2nd column is cur ...

htmlcssangularbootstrap-4css-grid

Hover effect within nested CSS styling applied to the list item element

I have structured my HTML as follows: <div id="chromemenu" class="chromestyle"> <ul> <li><a rel="dropmenu1" href="#" class="">Buy</a></li> <li><a rel="dropmenu2" href="#" class="">Sell</a>< ...

jqueryhtmlcsscss-selectors

Troubleshooting the pre-loader image loading problem

Apologies for bringing up a minor issue, but I'm struggling with this one. I added a pre-loader image to my page load using a simple method. You can find my page here Here is the HTML code for the Pre-loader image: <div class="se-pre-con">&l ...

javascriptjqueryhtmlcss