Best practices for aligning elements within a flex container

Trying to align a button at the bottom using flexbox, but running into issues.

Tried using position:absolute and bottom: 0, but it seems that the browser is not recognizing it correctly.

<ul class="box">
   <li><div>this has <br> more <br> <button>one</button></div></li>
   <li><div>this has <br> more <br> content <br> <button>one</button></div></li>    
   <li>d<div><button>one</button></div></li>
</ul>


ul {
    /* basic styling */
    width: 100%;
    height: 100px;
    border: 1px solid #555;

    /* flexbox setup */
    display: -webkit-box;
    -webkit-box-orient: horizontal;

    display: -moz-box;
    -moz-box-orient: horizontal;

    display: box;
    box-orient: horizontal;
}

.box > li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    margin: 0 1px;
    padding-bottom: 20px;
    border-bottom: 20px solid red;
    position: relative;
}
button {
    position: absolute;   
    bottom: 0;

}
/* our colors */
.box > li:nth-child(1){ background : #FCC; }
.box > li:nth-child(2){ background : #CFC; }
.box > li:nth-child(3){ background : #CCF; }

Considering using float as an alternative to flexbox, but still exploring solutions with flexbox.

Check out the demo here: http://jsfiddle.net/NJAAa/

Answer №1

Solution for WebKit: Visit this link

To summarize: place your text content in a separate div; utilize flexbox for each li element and set box-orient to vertical. Additionally, eliminate the need for absolute/relative positioning.

Answer №2

The explanation lies in the fact that the flex container doesn't have predetermined dimensions, as it adjusts to fit its contents.

Test this theory by changing the positioning to left or top, and observe how it responds to your input. Conversely, trying right or bottom won't yield any noticeable changes because the original width/height of the flex container is minimal.

Answer №3

Take a look at this on codepen. Hopefully, this will be helpful and not too late :)

ul {
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 80%;
  margin: 10% auto;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
  color: #b2b2b2;
  box-shadow: 2px 2px 3px #666666;
}

ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-preferred-size: 33.33%;
      flex-basis: 33.33%;
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
  text-align: center;
}

ul > li > button {
  margin: 20px;
  padding: 5px 15px;
  cursor: pointer;
}
ul > li > button:hover {
  color: whitesmoke;
  background-color: maroon;
}

/* our colors */
ul > li:nth-child(1) {
  background: #000000;
}

ul > li:nth-child(2) {
  background: #191919;
}

ul > li:nth-child(3) {
  background: #323232;
}

Also, you might find this helpful....

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

Content does not become interactive upon the initial loading of the page

I've modified a W3 schools slideshow template to use text instead of dots, but I'm encountering two issues 1: The first image doesn't load when the page loads. Although using a class ID and setting it to active fixes this issue, it leads to ...

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

Image with responsive div buttons

I am trying to add a set of buttons on each image in my masonry image gallery, but I'm facing issues with responsiveness. Whenever I resize the screen, some of the buttons disappear instead of adjusting their size and position accordingly. I want th ...

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

Round Loading Animation in CSS

I spent hours scouring the internet for a solution on how to create basic CSS circle shape loaders, but couldn't find anything straightforward. I am working on a special website project that requires displaying survey results in dynamic percentages th ...

Create a circle at the point where two table cells intersect in an HTML document

How can I create a circular shape at the intersections of HTML tables? I am struggling to figure out a way to incorporate shapes into HTML tables. My goal is to achieve a design similar to the image shown below. I have attempted using text and spans, as we ...

The appearance of the pop-up mask is displayed at lightning speed

Check out the demo here Here is the HTML code: <div class="x"> </div> <input class="clickMe" type="button" value="ClickMe"></input> This is the JS code: $(".clickMe").click( function() { ...

Establish the height of the root to be the same as the height

As a newcomer to HTML and CSS, I am struggling with setting the background color of my root div on a webpage. My code is quite complex, but let me simplify the issue for you by providing a sample problem below. <style> #background{ background-c ...

Data displayed in a table-like format

Is there a way to achieve this layout view image here (currently done using tables) while maintaining semantic markup? I believe the best tag for this would be dl. Each cell should have the height of its corresponding row. EDIT: The left column contains d ...

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

How come Bootstrap is displaying my icon on a separate line from the text?

I'm facing a layout issue with my Bootstrap grid. When I try to add an icon to a column, it ends up appearing below the text instead of beside it. Can anyone help me identify what's causing this problem? So far, I've attempted using spans, ...

What is the limit of CSS includes that IE can process?

While working on theming Drupal, I encountered an unusual issue. After enabling a few modules that added 5 to 10 link tags to the page, I noticed a strange behavior in different browsers. Firefox successfully added the new stylesheets to the cascade, but i ...

Looking for a solution to align the header properly in your React app?

Struggling with aligning a header? The CSS property of the header is inherited from the app's CSS file. For example, in the image below, "Our Mission" is the header that needs to be left-aligned. Looking for some assistance here. You can find the app. ...

The gap between list items(`<li>`s)

Feeling a bit perplexed here. I'm working on creating a page to showcase images. My goal is to have 5 images displayed per row, with maximum spacing when the window is at its widest (~950 px). However, as the window size decreases, I want the images t ...

Tips for triggering the .click() function upon returning to index.html after visiting a different page

I'm in the process of creating a portfolio website where the index.html page features a sliding navigation bar that displays a collection of projects. Each project is linked to a separate work.html page. I would like the sliding nav to automatically o ...

Error in jQuery when trying to access the src attribute of an image: "undefined src

Just started delving into jQuery. I'm trying to grab the image source and showcase it in a fixed division like a pop-up, along with the image title. However, I'm encountering difficulties in fetching the image source. My attempt with the .attr() ...

Learn how to create a logarithmic scale graph using CanvasJS by fetching data from an AJAX call

window.onload = function() { var dataPoints = []; // fetching the json data from api via AJAX call. var X = []; var Y = []; var data = []; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.overrideMimeType("applicatio ...

Is it possible to apply CSS hover effects to this intricate, irregularly shaped link?

I've tried numerous solutions to no avail. My goal is to make my links glow on hover using CSS. I attempted to use rectangles to link my images, but they are small and overlapping. Can I utilize polygon coordinates in CSS? The main issue I face is th ...

Centering content vertically in CSS

I am facing an issue with aligning buttons vertically inside a div. The number of buttons may vary, but I want them to be aligned vertically in a single column. Using "vertical-align: middle" does not seem to work. How can I achieve this? The height of th ...

Having difficulty implementing a pseudo-selector with a custom directive within an ng-repeat loop

I have created a directive for a table with collapsible rows that allows only one row to be open at a time. Here is how it looks: HTML: <div class="my-table"> <div class="table-header"> ... table headers ... </div> & ...