Arrange the divs vertically by utilizing flexbox styling

My goal is to use flexbox to vertically align three div blocks.

Even though I can successfully align them horizontally, I am facing issues with vertical alignment.

What could be the mistake in my approach?

.banner {
              padding-top: 10px;
              padding-bottom: 10px;
              background-color: #01b9d5;
              color: white;
              height: 55px;
            }

            .banner-align {
              display: flex;
              align-items: center;
              justify-content: center;
              border: 1px solid green;
            }

            .banner-hero {
              flex: 1;
              align-self: center;
              max-width: 50%;
              border: 1px solid red;
              text-align: center;
              display: inline-block;
            }

            .banner-left {
              align-self: flex-start;
              flex: 1;
              border: 1px solid green;
              display: inline-block;
            }

            .banner-right {
              align-self: flex-end;
              flex: 1;
              text-align: right;
              border: 1px solid yellow;
              display: inline-block;
            }
Here's an illustration:

Check out this fiddle for a visual representation: https://jsfiddle.net/zqc1qfk1/1/

htmlcssflexbox

Answer №1

The flex-direction:column attribute is missing from the flex styling.

By default, any flex container has a flex-direction: row, which causes it to move horizontally instead of vertically. This needs to be specified explicitly for vertical alignment.

Learn more about it here

.banner-align {
  display: flex;
  align-items: center;
  justify-content: center;
  border:1px solid green;
  flex-direction: column;
}

Check out the updated Fiddle.

Answer №2

To make sure each flex item takes up all the space in the row and forces new rows to be created, simply set the wrap property on the container and assign a width: 100% to each flex item:

.banner-align {
  display: flex;
  flex-wrap: wrap;
}

.banner-align > * {
   flex: 0 0 100%;
 }

This configuration ensures that every flex item fills up the entire row horizontally.

Check out the revised fiddle here

Answer №3

Using <span class="highlight">align-items: center</span>
on the flex parent will vertically center everything. However, if you apply 
align-self: [any value except center]
on the children, it will override this alignment.

Update:

Whoops! It appears that the reason you are not seeing the effects of align-self in the original code snippet is because the height of the parent container was not explicitly set. This caused it to only be as tall as necessary to contain the children elements. If the children had varying heights, you would have noticed them appearing staggered.

If your goal is to have all the children centered, consider removing the align-self properties and rely on the single align-items: center declaration on the parent element to achieve the vertical centering. On the other hand, if you prefer a staggered layout, omit the align-items: center from the parent element.

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

Incorporate an external JavaScript script using code

I'm currently working on integrating a map widget from 'Awesome Table' into the codebase of an open-source CRM platform. The specific code snippet I need to add is <div data-type="AwesomeTableView" data-viewID="-KLtnY5OHJPgnEOX1bKf"> ...

javascriptjqueryhtmlsrc

Utilize dynamic CSS application within an Angular application

In my Angular application, I dynamically load URLs inside an iframe and want to apply custom.css to the loaded URL once it's inside the iframe. I attempted using ng-init with angular-css-injector function in the iframe, but the CSS is not being applie ...

cssangularjsurldynamic

Nesting CSS classes allows for more specific targeting of

I am a bit rusty on CSS, it's been about 5-7 years since I last worked with it. Could someone help me come up with a solution to my problem? Here's the ideal design I have in mind: table.ctable { class:collapsible collapsed; } I know this syn ...

css

Resize the Bootstrap select element based on its contents

My HTML code includes a <select> element that is styled using Bootstrap 5. <div class="col-md-12"> <div class="mb-3"> <label asp-for="Schedule.Minutes" class="control-label"></l ...

htmlcsstwitter-bootstrapasp.net-corebootstrap-5

Using the jquery slider in conjunction with the onchange event

I have integrated a jquery slider add-on into my project that updates a value in a Linux file whenever it is manipulated. The slider is connected to a text input box, which is set as readonly and therefore always blurred. The issue I am facing is that the ...

phpjavascriptjqueryhtml

Is it possible to utilize a variable in determining the order of operations?

I'm currently developing a simple calculator script using a combination of HTML and PHP. The concept involves inputting two numbers and selecting the operator to perform the calculation. HTML Code <html> <head> <title>Calculat ...

phphtmlvariablessyntaxcalculator

Is your CSS failing to display images properly?

I recently launched my website, www.alphenweer.nl, and everything seems to be working fine except for the images in the template. Despite being on the correct URL, the images fail to load when the website is accessed. You can test it out here. Can someone ...

cssimage

Leveraging XPATH to pinpoint objects based on their RGB background color

I have a table with multiple divs inside it, many of which are identical except for their background colors! Is there a way to select a specific div based solely on its background color? Here is an example of the HTML structure: <div class="fc-event fc ...

htmlcssxpath

Ways to dynamically toggle visibility and hide elements by clicking outside the specified div

I have a div that, when clicked, displays a contact us form. This form toggles between being visible and hidden. How can I make it hide when clicked on another part of the document? Here is the code: function showContactForm(){ var formWidth = &apos ...

javascriptjqueryhtml

JavaScript allows for inserting one HTML tag into another by using the `appendChild()` method. This method

My goal is to insert a <div id="all_content"> element into the <sector id="all_field"> element using Javascript <section id="all_field"></section> <div id="all_content"> <h1>---&nbsp;&nbsp;Meeting Room Booki ...

javascriptjqueryhtml

Video playback disabled on hover in Chrome browser

I have added videos to a search results page. When the user hovers over the video, I want to show a preview of it in a separate container and start playing the video. $(".videoSearchResults video").mouseenter(function () { var container = document.cre ...

javascriptjqueryhtmlvideo

Make sure to save the HTML content after we make an AJAX call to retrieve it

Is there a way to call an HTML file using Ajax and then save the response as an HTML file in a specific location? I have been trying to make an Ajax call using jQuery, like shown below: $.ajax({ type: "POST", url: "../../../project/html/T ...

javascriptjqueryhtmlajaxjsp

How can I change the padding that is being inherited from "@ .MuiAlert-icon"?

Is there a method to override the padding inherited from "@ .MuiAlert-icon"? The Chrome inspector indicates that the current padding is set to 7px. .MuiAlert-icon { display: flex; opacity: 0.9; padding: 7px 0; font-size: 22px; ...

javascriptcssmaterial-ui

The HTML5 camera feature remains active even after navigating to a different page in an AngularJS application

I am currently exploring the video capabilities of HTML5. Using a directive userMedia, I have successfully activated my camera on my MacBook through navigator.getUserMedia() (using an adapter for cross-browser compatibility with supported browsers). Howev ...

javascripthtmlvideocameraangularjs

Tips for ensuring consistent sizing of card items using flexbox CSS

I'm attempting to create a list with consistent item sizes, regardless of the content inside each card. I have experimented with the following CSS: .GridContainer { display: flex; flex-wrap: wrap; justify-content: space-around; align-item ...

htmlcssreactjs

Is there a way to incorporate CSS into an element utilizing jQuery when only a class is available for identification, and when the time in the innerHTML is within a 5-minute range from the current time?

I have some HTML code that I need help with: <td class="mw-enhanced-rc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;18:10&nbsp;</td> My goal is to use JavaScript to make the time bold. $('td[class^="mw-enhanced-rc"]').eac ...

javascriptjqueryhtmlmediawiki

Tips for adjusting container wrapping to accommodate smaller window widths in bootstrap 4

Bootstrap 4 is still new to me, and I haven't had much experience working with Bootstrap 3 either. One issue I've encountered is that when I apply the class col-(breakpoint)-(span) to div elements, they don't automatically align in a single ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Placing the navigation bar on the right side of the section

.middle-site-content-container { width: auto; height: auto; border: 2px red solid; display: flex; /*Le pot pozitiona in line*/ flex-wrap: wrap; justify-content: center; flex-direction: row; margin: auto; } .middle-site-content-1, .middle ...

htmlcssflexbox

What is the best way to adjust width in Bootstrap for responsiveness?

Is there a way to change the width of div elements using only Bootstrap for responsiveness? I want the div elements to increase their width to 50% when the screen width is reduced to around 600px, but I can't find a breakpoint for the w-* class. I a ...

htmlbootstrap-4

Border shifts on hover effect

After much trial and error, I finally managed to center two links in a nav bar perfectly on the page. I also added a grey bottom border that spans the entire width of the page, with the hover effect turning it blue under the links. Check out this example: ...

csshoverborder