Arranging DIV elements with flexbox and CSS

Question

Arranging DIV elements with flexbox and CSS

I have a straightforward layout featuring a 3-column design that consists of a back button, a main content section, and a forward button:

<div class="container h100">
        <div class="row align-items-center h100">
            
            <div class="col-sm-2 align-self-center order-1" id="backbutton">
                <button>Back</button>
            </div>
        
            <div class="col-md-8 align-self-center align-self-stretch" id="main">
                <p>Main content</p>
            </div>
        
            <div class="col-sm-2 align-self-center order-1" id="backbutton">
                <button>Next</button>
            </div>
        </div>
</div>

display on a larger screen

If the screen is smaller (like a phone), I want the main content to be on top with the back and next buttons below it in one row (with back on the left and next on the right).

desired layout on a smaller screen

I've attempted using "order-1" and "order-12", but so far, no success. Any recommendations?

html css flexbox

Answer 1

Answer №1

It is best to give this a try on your own. I understand the frustrations that can come with CSS (I've been there before and had a similar question ages ago).

.wrapper {
  display: flex;
  flex-flow: row nowrap;
}

@media screen and (max-width: 480px;){
  .wrapper{
    flex-flow: column;
  }
}

This should do the trick, but I suggest checking out Flexbox Froggy for more practice.

Answer 2

It is best to give this a try on your own. I understand the frustrations that can come with CSS (I've been there before and had a similar question ages ago).

.wrapper {
  display: flex;
  flex-flow: row nowrap;
}

@media screen and (max-width: 480px;){
  .wrapper{
    flex-flow: column;
  }
}

This should do the trick, but I suggest checking out Flexbox Froggy for more practice.

Answer 3

Answer №2

<html lang="en">
<head>
  <title>Web Page</title>
</head>
<style>
  #btn1 {
    float: left;
  }
  #btn2 {
    float: right;
  }
  #main {
    height: 300px;
    background-color: #ffe500;
  }
</style>
<body>
  <div id="main">
    main content
  </div>
  <div id="btn">
    <button id="btn1">Previous</button>
    <button id="btn2">Next</button>
  </div>
</body>
</html>

Answer 4

<html lang="en">
<head>
  <title>Web Page</title>
</head>
<style>
  #btn1 {
    float: left;
  }
  #btn2 {
    float: right;
  }
  #main {
    height: 300px;
    background-color: #ffe500;
  }
</style>
<body>
  <div id="main">
    main content
  </div>
  <div id="btn">
    <button id="btn1">Previous</button>
    <button id="btn2">Next</button>
  </div>
</body>
</html>

Arranging DIV elements with flexbox and CSS

Answer №1

Answer №2

Similar questions

Incorporating HTML within PHP

Strange behavior observed while attempting to create a smooth CSS transition effect from the right side

Is there a way to enable text selection on a jQuery draggable div?

Exploring the process of extracting/parsing HTML with Microdata

`Finding Solutions for jQuery and CSS Problems`

CSS Switchable Style Feature

Is it possible to influence IE Browser Mode to switch to Compatibility mode?

The Joys of Delayed Animation with jQuery Isotope

Gradient background overlaid with a blended SVG shape

Troubleshooting the issue of Bootstrap 4 scrollspy failing to update active navbar items

Set Bootstrap column size to match a particular column

Is there a way I can detect a browser timeout and display a custom error message?

Display a div every 3 seconds with the help of jQuery

Tips for adjusting the font color of user-provided text within an input box using HTML and CSS

Loading information in a directive by utilizing promises in a service with AngularJS

Is there a way to incorporate additional text into option text without compromising the existing values?

Why doesn't the z-index of child elements function properly when their fixed parents share the same z-index value?

Divs should be of consistent and adjustable height

The integration of Angular CLI with SCSS is no longer a separate process -

excess spillage occurring within the table's td elements