Other options to consider besides using flex wrapping

Is it possible to use other methods to wrap these image items with the display: flex; property besides using the flex-wrap property? Are there alternative approaches available?

body {
  margin: 0px;
}

img {}

h1 {}

p {}

a {
  background-color: #ddd;
  border: 1px solid #000;
  padding: 10px 20px;
  margin: 10px;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}
<div class="container">

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 1</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel suscipit ligula. Vestibulum eu metus nibh. In nec dignissim orci.</p>
  </div>

...
...

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 7</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel suscipit ligula. Vestibulum eu metus nibh. In nec dignissim orci.</p>
  </div>

</div>

htmltwitter-bootstrapcssflexbox

Answer №1

One day, a different approach will emerge as display: grid:

.wrapper {
  display: grid;
  grid-auto-flow: row;
}

Demo on Github

Answer №2

If you're looking for an alternative to using flex-wrap: wrap, consider switching from flex-direction: row to column by utilizing a media query.

Check out the demo on jsFiddle

body {
  margin: 0px;
}

img {}

h1 {}

p {}

a {
  background-color: #ddd;
  border: 1px solid #000;
  padding: 10px 20px;
  margin: 10px;
}

.container {
  display: flex;
  /* flex-wrap: wrap; */
}

.item {
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}

@media ( max-width: 500px ) {
.container {
  flex-direction: column;
}

<div class="container">

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 1</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 2</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 3</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/256/" alt="">
    <h1>Title 4</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 5</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/1024/512/" alt="">
    <h1>Title 6</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

  <div class="item">
    <img src="http://lorempixel.com/512/512/" alt="">
    <h1>Title 7</h1>
    <a href="#">Link</a>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget mauris. Suspendisse id velit. Integer sed metus vel ante mattis gravida nec ut turpis.</p>
  </div>

</div>

Answer №3

Another option instead of utilizing flex is to eliminate display: flex from the container and employ display: inline-block for all item images.

.item{
  display: inline-block;
  background-color: #eee;
  padding: 10px;
  margin: 10px;
}

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

Transform an HTML/CSS document into a PDF file

I recently used html/css to create my resume. Is there a method to transform it into a PDF format? Alternatively, do you have any recommendations for using a different tool to write a CV? Any assistance would be greatly appreciated! ...

htmlcsscomputer-vision

PHP is causing a mysterious slash to continuously pop up within a string during the creation of session data

I encountered an issue while using session data to set the value of an event title. When the title contains an apostrophe, such as "Britain's Digital Future," a backslash keeps appearing before the apostrophe. This results in multiple slashes being ad ...

phphtml

Disabling padding on TwitterTweetEmbed component in React Twitter Embed

Having an issue with Material UI and React Twitter Embed, unable to remove top and bottom margins. Here's the code snippet causing concern: const styles = theme => ({ listItem: { padding: '0px', }, tweetSize: { margin: 0, ...

cssreactjstwittermaterial-ui

Tips on utilizing Blazorise's numeric edit group with grouping functionality

I recently attempted to utilize the numeric edit group separating attribute in Blazorise but encountered issues. According to the documentation, it should be possible to use this feature, however, my attempts were unsuccessful. I would greatly appreciate ...

c#htmlbootstrap-4blazorise

What steps can I take to enhance the responsiveness and overall performance of this code using bootstrap?

Struggling with making your website responsive? No worries, we've all been there. Whether you're a pro at coding in react.js and vue.js or a complete beginner, we all need to start somewhere. Any suggestions or tips on how to improve responsivene ...

htmlcssbootstrap-4

Unable to Locate CSS File in Separate Folder in HTML

I am struggling to link my stylesheet from a different directory to my HTML files, even though I believe I am using the correct method. Could it be that I am targeting the wrong level? '-' represents levels Take a look at my file structure: my ...

htmlcssnode.js

What causes an asynchronous function to exhibit different behavior when utilized in conjunction with addEventListener versus when manually invoked?

I was delving into the concepts of async and await keywords and decided to create a basic demonstration using an HTML file and a corresponding JS file. In my example, I defined two promises - promise1 and promise2. The handlePromises function uses async/ ...

javascripthtmlasynchronous

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

javascripthtmljquery

Is there a way to update an image dynamically within CSS using the :before pseudo-element?

I am attempting to dynamically change the background image, but I am having trouble accessing the wrapper before "wrapper:before{}" from jQuery $('.wrapper:before) .wrapper:before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; displa ...

jqueryhtmlcss

Is there a way to access the variable value chosen from a select dropdown inside a function and then assign it to a JavaScript variable outside of the function?

Below is the HTML and JavaScript code that I am working with: function changeResult() { x = document.getElementById("dropdown-list").value; console.log((x)); } var qq; <select id="dropdown-list" onchange="changeResult()"> <option value="4 ...

javascripthtml

Creating a dynamic tbody element on button click with the help of javascript or jquery

I am working with the following code: $(document).ready(function() { //Optimizing by selecting tbody first using jquery children var tbody = $('#myTable').children('tbody'); //If no tbody found, select the table itself ...

javascripthtmljquerydynamic

"Stay entertained with a captivating animated gif that appears when you refresh the

I just implemented this code snippet to enable animated gifs to work after refreshing a webpage. It's functioning properly in Chrome, Safari, and Internet Explorer except for Firefox. Can someone please offer assistance? jQuery: $(img).css("backgrou ...

javascriptjqueryhtmlcssanimated-gif

Sending information to a server using JavaScript

Greetings everyone, this is my first time posting here and I would appreciate detailed guidance in your comments. Just a little background about myself: I am a second-year college student with one year of Python training. I only recently started learning ...

javascriptjqueryhtmlcanvas

Creating a visually appealing multi-bar chart in AngularJS: Tips for effectively presenting data

Imagine that I have the JSON data below: [ { month: "Jan", cost: 80, energy: 90 }, { month: "Feb", cost: 50, energy: 80 }, { month: ...

javascripthtmlcssangularjs

Ways to customize the background color of child cells in a table

I've implemented material-table in this UI and I'm currently working on customizing the style of specific cells only when the onTreeExpandChange is true. Essentially, my goal is to change the background color for cells 2 & 3. Check out the s ...

cssreactjsmaterial-uimaterial-table

Adding a box shadow around the entire div in Internet Explorer 11 with CSS

I am having difficulty applying box-shadow to create a shadow around the entire perimeter of a div. While it works in FireFox, it does not work in IE 11. So far, I have attempted solutions from this StackOverflow thread. For reference, here is a JSFiddle ...

htmlcssinternet-explorer

implement some level of control within the ngFor directive in Angular

For instance, let's say I have an ngfor loop: <ng-container *ngFor="let setting of settings | trackBy: trackById"> <button mat-button [matMenuTriggerFor]="menu">Menu</button> <mat-me ...

htmlangulartypescriptangular-material

CSS and the best practices for button styling in a navigation bar

My friend and I are facing a CSS issue while working on a webpage together. We both have limited experience with HTML and CSS. Here's the code snippet in question: .nav li { margin: auto; display: inline-block; color: white; padding: 10px; font ...

htmlcsshtml-listsnav

Transform one column into several columns

I am working with a function that populates a table row by row. Here is the code: function renderListSelecoes(data) { // JAX-RS serializes an empty list as null, and a 'collection of one' as an object (not an 'array of one') va ...

javascriptjqueryhtmlajax

A guide to designing a responsive flexbox layout with various columns and rows

I need help designing a container that is responsive for both mobile and desktop, resembling the layout shown in this image. The initial HTML structure is as follows, but I can modify it by adding elements or classes if necessary. <div class="conta ...

htmlcssflexbox