Creating a versatile table design using flexbox

Looking to create a gallery for images and videos using flexbox properties to create a dynamic table of divs to hold media.

The challenge is generating the table automatically without specifying the number of rows and columns needed.

For example, if I have 2 images, the table will have 2 elements. If I have 6 photos/videos, the table will have 3 rows with 2 columns each, and so on.

What I want:

https://i.sstatic.net/dTVVu.png

What I have:

https://i.sstatic.net/4mjna.png

Does anyone know if it's possible to create such a flexible table in flexbox without predefining rows and columns?

.container {
  width: 100%;
  height: 100%;
  background-color: rosybrown;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  background: red;
  margin: 1%;
  flex: auto;
}
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

htmlcssflexbox

Answer №1

It appears that this is the solution you have been seeking:

.container {
  width: 100%;
  height: 100%;
  background-color: rosybrown;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  width: 20%;
  background: red;
  margin: 1%;
  flex: auto;
  text-align: center;
  min-height: 50px;
}
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

By defining the dimensions of the item class, you can achieve the desired outcome.

Answer №2

Here is the solution for you! Your CSS for the container element was almost there, you just needed to include:

justify-content: space-between;
align-items: auto;
align-content: start

As for the flex-item,

Instead of using flex-grow, flex-shrink, and flex-basis individually, you can simplify it using the shorthand property:

flex: 0 0 auto;


.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: auto;
  align-content: start
}
.item {
  flex: 0 0 auto;
  margin: 6px;
  background-color: red;
  width: 125px;
  height: 125px;
  font-size: 2rem;

}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

Answer №3

It is important to specify an approximate width for the children elements. Testing on different screen sizes is recommended, focusing on the flex-basis property.

To ensure the desired layout on each screen size, media queries may be necessary to adjust the basis accordingly.

html,
body{
  height:100%;
  margin:0;
  padding:0;
}

.container {
  width: 100%;
  height: 100%;
  background-color: rosybrown;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item {
  background: red;
  margin: 5px;
  flex: 1 1 200px; //#!#
}
<div class="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</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

Do you know of any HTML Validators that are compatible with Maven?

Currently, I am working on a project that consists of multiple HTML files. In order to ensure a smooth Maven build process, I am looking for a validator that can perform the following checks: Validate the syntax of the files (such as ensuring all opening ...

htmlmaven

Show the precise selection from one dropdown menu based on the chosen value in another dropdown menu

How can I retrieve the scheduleID value from a specific MovieID value within a comboBox? Movie Selection Box: <?php $query = "select * from ref_movies ORDER BY MovieID"; $result = mysql_query($query) or die (mysql_error()); echo '<s ...

phphtmlmysql

Enhancing accessibility: the use of sr-only or aria-label

According to MDN: In this scenario, a button is designed to resemble a standard "close" button, featuring an X in the center. Since there is no visual cue indicating that the button closes a dialog, the aria-label attribute is utilized to provide this i ...

htmltwitter-bootstrapaccessibilitywai-aria

Is it possible to achieve a capsule shape using border-radius without specifying a fixed width or height?

Can a capsule shape be created using border-radius without specifying a width or height? I am looking to have the left and right sides of the capsule fully rounded while keeping the horizontal length straight. Setting the radius to 50% does not achieve th ...

csscss-shapes

Creating Spinning Text Effects in Internet Explorer with CSS

Inside a list item (<li>), I have some text that I want to rotate 270 degrees. Direct methods in FireFox, Safari, Chrome, and Opera work fine for this, but when it comes to IE, there is no direct support. I've tried using filters like matrix and ...

cssinternet-explorer

Ensure the left and right screen widgets remain fixed in their positions as the user scrolls down the page using the spacebar

Currently, I have a webpage that showcases products with a large height attribute. I am looking for a way to make the page scroll down when the user hits the space bar to view more products. However, I want my screen widgets such as the shopping cart and ...

javascriptcsspositioning

What is the best way to organize divs in a grid layout that adapts to different screen sizes, similar to the style

Is there a way to align multiple elements of varying heights against the top of a container, similar to what is seen on Wolfram's homepage? I noticed that they used a lot of JavaScript and absolute positioning in their code, but I'm wondering if ...

javascriptjquerycss

A simple demo showcasing interactive HTML pages using Django and AJAX

In my search for answers, I came across the following helpful posts: How to Reload table data in Django without refreshing the page Tutorial on Django dynamic HTML table refresh with AJAX Despite the insights from these posts, I am still facing chal ...

pythonhtmlajaxdjango

Tips for enlarging the box width using animation

How can I create an animation that increases the width of the right side of a box from 20px to 80px by 60px when hovered over? What would be the jQuery code for achieving this effect? ...

javascriptjqueryhtmlcss

Alter the color as the text moves beneath a see-through layer

Imagine a scenario where there is a page with text and on top of that, there is a transparent div that is smaller than the text area. Is it feasible to dynamically alter the color of the text that scrolls underneath the transparent div? Picture the trans ...

javascriptjqueryhtmlcss

choose particular column in every row from the table's header class name

Every <th> in a table has a class, while the <td> elements do not. Is there a way to style all corresponding <td> elements with the same styles as their <th> counterparts using only plain css without any script? Furthermore, since ...

css

Having difficulty automating the selection of dropdown menu using Selenium in Python

I'm struggling to automate the selection of a specific element on this webpage using Selenium in Python. The elements I'm targeting from the webpage are as follows: https://i.sstatic.net/d4xcH.png Upon inspecting the page element, I found this ...

pythonhtmlseleniumselenium-webdriverweb-scraping

Attempting to establish a discussion board using MVC 5 on the ASP.NET platform

I'm currently facing a challenge while attempting to build a simple forum using ASP.NET MVC 5. Specifically, I am encountering an error message stating "The INSERT statement conflicted with the FOREIGN KEY constraint." Below, you can find the code sni ...

c#htmlasp.net-mvcframeworks

I have decided to integrate Laravel with Vite for building CSS and JS. However, when I attempted to run `npm run dev`, it appeared to execute but was accompanied by an error in the background that

Hi there, I'm new to Laravel and I've created a small app that primarily uses CSS and JS scripts. Everything was working fine in my development environment, so I decided to push it to a production server. However, after installation, my code does ...

javascriptcsslaravelnpmvite

Utilize the ng-controller directive with unique aliases across various sections of HTML code

I'm facing an issue with my ng-controllers when multiple controllers are used on the same page. For instance, I have one controller in the page header, another in a different section of the same page, and one in the content of the page. However, all o ...

javascripthtmlangularjsangularjs-service

Activate modifications in a distinct column?

I've been exploring a solution to achieve a similar functionality where clicking or hovering on headings in a column brings up corresponding text in another column. My idea is to use list items with a carousel for this purpose, but I'm facing so ...

javascripthtmlcss

Tracking activities in Laravel app---How to monitor actions

Is there a way to split the date and time onto one line in my script? I'm having trouble achieving this as shown here: Here is my current script: <div class="tab-pane active" id="tab_overview"> <div ...

phphtmllaravel

Unable to open modal in browser due to HTML, CSS, and jQuery issues

I'm having trouble creating a modal window that opens when a button is clicked for user registration. The button is being clicked, but the modal window isn't appearing. Here's my code: <script src="http://ajax.googleapis.com/ajax/libs/ ...

javascriptjqueryhtmlcssmodal-dialog

Terminate a browser tab with the click of an HTML button

I'm facing an issue with my HTML button - I need it to close the tab upon clicking. Unfortunately, the common methods seem to no longer work on newer versions of Chrome and Firefox. I've tried using these two solutions but they did not work: & ...

javascripthtmlbrowser

Customize a theme component only when it is a child of another component

I am trying to customize the CSS of MuiButton only when it is nested inside a MuiDialog. https://i.stack.imgur.com/13doLm.png In regular CSS, you could achieve this with: .MuiDialog-root .MuiButton-root { border: 5px solid blue; } However, I am strug ...

cssreactjsmaterial-ui