Flexbox Display Alignment: Centered and Bottom-aligned

I am in the process of designing a full-height header with one element centered and another element positioned at the bottom.

Typically, I have utilized position: absolute; for this layout, but I would like to explore using flex instead.

.full-header {
  background-color: green;
  display: flex;
}

.align-item-center {
  background-color: blue;
}

.align-item-end {
  background-color: red;
}
<div class="container full-header">
  <div class="align-item-center">
    Row 1
  </div>
  <div class="align-item-end">
    Row 2
  </div>
</div>

To assist in illustrating my objective, I have included a diagram. Additionally, I am using bootstrap 4, but I welcome any guidance on utilizing native flex properties.

https://i.sstatic.net/26xaa.png

csshtmlflexbox

Answer №1

To accomplish this, follow these steps:

  • Change the flex-direction of the .full-header class to column. This will arrange the child divs from top to bottom.
  • Include automatic top and bottom margin for the .align-item-center class. This ensures that the top and bottom margins of .align-item-center will automatically expand to take up the available space in .full-header.

body {
  margin: 0;
}

.full-header {
  background-color: green;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.align-item-center {
  background-color: blue;
  margin: auto 0;
}

.align-item-end {
  background-color: red;
}
<div class="container full-header">
  <div class="align-item-center">
    Row 1
  </div>
  <div class="align-item-end">
    Row 2
  </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

What is the best way to calculate the time elapsed between two consecutive double clicks using jQuery?

I am trying to calculate the time difference between two clicks on a single button. Here is my code snippet: <a href="#">click here</a> My current JavaScript code to capture the time of each click is as follows: var clickedTime = '&apos ...

javascriptjqueryhtmlclickdouble-click

access the database information within the fullcalendar plugin

I've been exploring the calendar code on arshaw/fullcalendar and made some modifications, but I'm still unsure how to link JavaScript with a database. Here is the original code: $(document).ready(function() { var date = new Date(); var d = dat ...

javascripthtmlmysql

Tips on how to showcase a picture with the focus on the center by enlarging it within

We have a long frame on the page, with an aspect ratio of about 3.5:1 width to height. However, most of the photos being displayed are in a 4:3 ratio, which is larger and not a proper fit for the frame. The customer really wants the long frame and has no ...

htmlcss

Python Flask login application failing to redirect to login page

Currently, I'm building a login application with Python Flask and MongoDB integration at the backend. While everything else seems to be running smoothly, there's an issue with redirecting to the login page upon login. # See below for my code @ap ...

pythonhtmlmongodb

Can React components receive props or data when they are inserted into regular HTML code?

I have a project where I need to make updates to an old-fashioned website. The current layout is table-based and coded by hand. My idea to streamline the process is to use React to minimize repetitive coding tasks. Specifically, I want to loop through an a ...

javascripthtmlreactjs

What are some ways to create a flashing effect for text in HTML and JavaScript?

Although flashing text is typically prohibited in many places, my client has requested it for a project. I need to create one line of text that flashes using HTML and JavaScript. The text should appear and disappear within seconds, repeating this cycle. I ...

javascripthtmlcss

XPath //*[text()] is not picking up the desired text

Using the XPath 1.0 expression //*[text()] does not capture the phrase "now revenue of kfc is" https://i.stack.imgur.com/GeFCY.png However, with the XPath 2.0 expression //text(), it can be selected. https://i.stack.imgur.com/uTSqW.png Unfortunately, S ...

htmlxmlseleniumselenium-webdriverxpath

Is there a way to reposition the arrows in this Bootstrap 5 accordion to appear ahead of the text?

Here's an example from Bootstrap 5 web page that I've been working with (https://getbootstrap.com/docs/5.0/components/accordion/). My query pertains to positioning the arrows before the text in the accordion items. Despite attempting various appr ...

htmlcssbootstrap-5

The code snippet 'onload='setInterval("function()",1000)' is not functioning as expected

I need to continuously load the contents of an XML file into a specific HTML div every second. Here is the JavaScript code that I am using to parse the XML file: function fetchEntries() { if (window.XMLHttpRequest) req = new XMLHttpRequest(); ...

javascriptxmlajaxhtml

Using jQuery, retrieve the "select" element within a specific row of a

I am working on a table row that has the following HTML structure: When the user interacts with the "Name" field, I trigger the "select" event and pass it to the nameDropChanged function. Once I have a reference to this select element, I need to change th ...

javascriptjqueryhtmljquery-selectors

My custom Material UI table is being hindered by unnecessary div tags that are interfering with my CSS styling

View the generated code The rendered table demonstrates that when scrolling past the maximum width, the data does not appear <div> <table (not going to display all the markup for this. this table contains the headers of each column and appear ...

htmlcssreactjsmaterial-ui

Tips for importing modules without encountering errors

Currently in the process of constructing a compact website with socket.io and express. Opting for Typescript to ensure accurate type errors, then transpiling the frontend code to Javascript for seamless browser execution. Frontend code: import { io, Socke ...

javascripthtmltypescriptimporterror

Firefox is unable to display SWF files

My code snippet: <div id="sw" style="cursor:pointer" > <object id="swfobj" type="application/x-shockwave-flash"> </object> The JavaScript part: function openfile(filePath) { $("#swfobj").attr("data", filePath); $("#sw ...

javascriptjqueryhtmlfirefoxflash

Click events are not functioning properly after an AJAX request is made

$(document).ready(function () { var user = 1; $("a.like").on("click", function () { var article = $(this).attr('data-article'); $.ajax({ type: "POST", url: "WebService.asmx/Like", ...

javascriptjqueryhtmlcssbootswatch

CSS transform causing scrolling issues in Microsoft Edge browser

Whenever I click a button, a div flips. Once flipped, the div contains a scrolling list. If the list is not long enough to scroll, everything works fine. However, if the list is long enough to require scrolling, the items disappear... This issue ...

htmlcssoverflowcss-transformsmicrosoft-edge

What is the best way to use flexbox to occupy the remaining height and align in the center of the screen?

I'm facing a challenge in setting the login container at the center of the screen while occupying the remaining height. It seems that using justify-content aligns the content in the center, but despite setting the container's height to 100%, alig ...

htmlcsstailwind-css

The problem with the Bootstrap Navbar Dropdown is that it opens up within the confines of

I have created a navigation bar using Bootstrap 4 and included the .navbar-bottom class to enable scrollbar functionality when there are more menu items than the total width of the page. However, an issue has arisen where the Bootstrap 4 navbar dropdown o ...

cssbootstrap-4

Visual Timeline using Bootstrap

I recently pasted the code from a source (link provided) into my project, but I noticed that the images are appearing larger than they should. I am looking to adjust the size of the content on the left and right sides while also ensuring there is a vertica ...

jqueryhtmlcsstwitter-bootstrapresponsive-design

Ideas for designing nested grids/boxes with a touch of style

Hey there, I'm on the hunt for some creative ways to construct nested boxes like the ones illustrated in the image below. My preference is to achieve this using HTML and CSS, but I am open to utilizing frameworks such as Bootstrap for styling if neede ...

htmlcssnestedgrid

Obtaining an attribute of a row in a table using Selenium and Python

I've been trying to figure out how to check if this button (image) has been clicked: https://i.sstatic.net/Nc3Pe.png It's crucial for me to interact with this button, as it allows me to modify the price of certain items and protect them when ne ...

pythonhtmlseleniumselenium-webdriver