Horizontal order with Flexbox

I'm currently utilizing flexbox to arrange elements in a row

<div class="artist-wrapper">
    <div class="artist"></div>
    <div class="artist"></div>
    <div class="artist"></div>
</div>

.artist-wrapper {
    display: flex;
    height: 100%;
    width: 100%;
}

.artist {
    flex: 1;
    height: 100%;
}

The implementation is functioning as intended! However, for smaller screens such as mobile devices, the `.artist-elements` should be stacked vertically instead of horizontally. Is there a way to achieve this using flexbox?

htmlcssflexbox

Answer №1

To achieve responsive design, incorporate media queries and enable wrapping in the parent container.

View JSFiddle Demo

.artist-wrapper {
  display: flex;
  height: 100%;
  width: 100%;
}
.artist {
  flex: 1;
  height: 100px;
  border: 1px solid grey;
}
@media screen and (max-width: 480px) {
  .artist-wrapper {
    flex-wrap: wrap;
  }
  .artist {
    flex: 0 0 100%
  }
}
<div class="artist-wrapper">
  <div class="artist"></div>
  <div class="artist"></div>
  <div class="artist"></div>
</div>

Answer №2

Is this what you are looking for? This code snippet utilizes the display: inline-block property.

Alternatively, you can check out a different approach using flexbox in this example here. By utilizing the flex-wrap: wrap property and removing min-width and min-height, you can achieve a more adaptable layout.

Answer №3

You have the option to utilize min-width on its own or in conjunction with media queries.

(refer to comments for further details)

.artist-wrapper {
  display: flex;
  flex-wrap:wrap;
}
.artist {
  flex:1;
  min-width:250px;/* set breakpoints at 500px and 250px */
  min-height: 50px;/* consider using actual content instead*/
  box-shadow:0 0 0 1px gray;
}

/* additional styles */
.artist-wrapper {
  margin:1em;
}
.artist {
  color:#444;
  font-size:1.5em;
  font-family:'lucida console', courier;
  background:tomato;
  display:flex;
  align-items:center;
  justify-content:center;
}
.artist:nth-child(odd) {
  background:orange
    }
.artist:nth-child(4n) {
  background:turquoise;
  min-width: 500px;
  max-width:100%;/* allows flexible resizing for smaller screens */
    }
<div class="artist-wrapper">
  <div class="artist"></div>
  <div class="artist">breaks at 250px;</div>
  <div class="artist">breaks at 500px</div>
</div>

<div class="artist-wrapper">
  <div class="artist"></div>
  <div class="artist">breaks at 250px;</div>
  <div class="artist">breaks at 500px;</div>
  <div class="artist"> breaks at 1250px;</div>
  <div class="artist"> and so on ... </div>
  <div class="artist"></div>
  <div class="artist"></div>
  <div class="artist"></div>
  <div class="artist"></div>
  <div class="artist"></div>
  <div class="artist"></div>
  <div class="artist"></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

A Guide to Importing CSV Data Into a Datatable

Is there a way to efficiently import data from a CSV file and display it in a table using the datatables plugin? Currently, I have a fixed table structure: <table id="myTable" class="table table-striped" > <thead> ...

javascripthtmljquerydatatables

Trouble with Angular Charts: Data Reading Issue

Trying out chart.js for the first time and encountered an issue where the chart is not able to read data from the model. Previously, I had an error message of Error: $injector:modulerr Module Failed to instantiate module chart.js. This was fixed by switch ...

javascripthtmlangularjschart.js

Web Components Vanish Without Warning

I attempted to insert the HTML code for a button into my main index.html file after a specific line, but I encountered a strange issue. While the button displayed correctly, the homepage of my website suddenly vanished without any explanation. Here is the ...

javascripthtmljquerycss

Adjusting content within a div using a loop with a pause interval

I am working on a project where I need to manipulate the content of a div. Here is the initial code snippet: <div class="mytext">first</div> My goal is to dynamically change this text from 'first' to 'second' after 5 s ...

jqueryhtmlcss

Using plain JavaScript (without JQuery) to specify the AJAX content type

I have been working on form submission using AJAX with plain JavaScript, without any external libraries. However, I encountered an issue where the PHP doesn't seem to parse the data correctly when I try to parse the form. After doing some research o ...

javascriptphpajaxhtmlcontent-type

The Bootstrap navigation bar is refusing to collapse

Whenever I resize the screen, the navbar items do not collapse into the toggle menu, instead, they are just stacked below the navbar brand. Any thoughts on why this might be happening? <nav class="navbar navbar-light navbar-expand-md"> ...

htmlbootstrap-5

Does Ext js have a monochromatic theme of blue running through everything

While the blue color may give off a nice office ambiance, it's important to have variety in the appearance of different applications. Is it simple to customize the look in ext js? ...

javascriptcssextjs

Attempting to dynamically populate a dropdown menu in HTML using the ng-repeat directive from AngularJS

I am facing an issue while trying to populate my select dropdown in HTML using ng-repeat. Upon inspecting the browser, I noticed that my ng-repeat directive seems to be commented out. Here is my HTML code: <select ng-model="transportcompanies" ng-opti ...

htmlangularjsselectangularjs-ng-repeat

What is the best way to create a button that can cycle through various divs?

Suppose I want to create a scroll button that can navigate through multiple div elements. Here is an example code snippet: <div id="1"></div> <div id="2"></div> <div id="3"></div> <div id="4"></div> <div ...

javascriptjqueryhtmlcss

Tips for eliminating gaps between navigation items (HTML / CSS)

I'm struggling to eliminate the spacing between the li items in my navigation bar. Even after setting margin: 0px for both the item and anchor (link), the gap still persists. How can I get rid of these spaces? /* navigation styles */ nav { backgroun ...

htmlcss

Designing a horizontal slide banner with enhanced functionality

I am working on displaying a vertical banner that slides out horizontally from the right side of the screen when the user clicks on the open button/div, and also has the ability to close it. The basic design concept is illustrated in the sample image below ...

javascriptjqueryhtmlcss

Detect click outside in JavaScript for closing

While this topic has been discussed before, each issue presents its own unique challenges. Despite trying various solutions and examples for making the submenu close when clicking outside of it, I have not had any success. Is there a way to make the uslug ...

javascriptjqueryhtml

barchart rendered in SVG without the use of any external libraries

Creating a stacked barchart with SVG and HTML without relying on any third-party library has been quite a challenge. Despite searching extensively online, I have not come across a single resource that demonstrates how to build a stacked bar chart using pla ...

javascripthtmlcssreactjssvg

No visible changes resulting from the CSS file

My project includes a CSS file named default.css, but it doesn't seem to be working or making any changes to my page This is the content of default.css: .feedbackText{ display: none; text-align: center; margin-left: 50px; color: blue; } In the HTML ...

csshtmlbootstrap-4

Adding a class to a Vue component using the $refs property

I am facing an issue where I need to add dynamic class names to various Vue components based on their reference names listed in a configuration file. Manually adding classes to each component is not feasible due to the large number of components. To addre ...

javascripthtmlcssvue.js

Listception: A Vertical List Nested Inside a Horizontal List

I am currently working on creating a basic navigation system, and I would like to implement a horizontal list with vertical items within it: Header 1 Header 2 Header 3 -Sub 1 -Sub 1 -Sub 1 -Sub 2 -Sub 2 -Sub 2 -Sub 3 ...

htmlcss

Using jQuery to show array elements with unique formatting or separator

Using the jQuery map/get function, I am able to retrieve an array of values from multiple checked checkboxes: $('input[type=checkbox]:checked').map(function(_, el) { return $(el).val(); }).get(); After executing this code, I will get an arr ...

jqueryhtmlarrays

I'm having trouble wrapping my head around this jQuery script

I'm in the process of designing a website that will feature two distinct themes: green and blue. By default, the color scheme is set to green, but users will have the option to switch to a blue theme by clicking on a button. After doing some research ...

javascriptjqueryhtmlcss

showing a pop-up message when a specific javascript function is triggered

Here is a unique code snippet showcasing a customized dialog box created with HTML, CSS, and JavaScript. The dialog box is displayed when a button is clicked. <!DOCTYPE html> <html> <head> <style> /* Custom Modal Styles */ .modal { ...

javascripthtmlformspopuponsubmit

Contrasting border with border-style

To eliminate all borders from my primefaces panelgrid component, I employ the following techniques: First method: .table, table td { border-style: hidden !important; } Second method: .table, table tr, table td { border: none !important; } Can ...

cssprimefaces