`Flexbox: Achieving Alignment of Items``

I am looking to align items in a specific way.

My goal is to have 4 items in one row, and then the remaining 3 items in the next row, all centered.

Despite setting the width at 25%, I am encountering some issues with alignment.

Please check out the code snippet here

.flex-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  width: 100%;
}
.quarter {
  width: 24.6%;
  padding: 20px;
  background-color: #b5d46e;
  border: 3px solid white;
  color: white;
  font-size: 1.5em;
  text-align: center;
}
<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>5</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>6</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>7</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>8</h3>
  </div>
</div>

htmlcssflexbox

Answer №1

To display each set of elements with the class .quarter on a single line, wrap them in their own flex-box containers. Remember to assign the flex:1; property to each .quarter element instead of using the width:25% property.

Here is an example of HTML for your first row. Please refer to the provided fiddle for the complete code and instructions on where to add the flex:1; property.

<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>

https://jsfiddle.net/ogho96cf/

Answer №2

Arrange 4 items in one row and the remaining 3 items in the next row, ensuring they are all centered.

Uncertain about the purpose of the 8th item...

Initially, apply box-sizing:border-box to include padding/borders in width calculations, then set the widths (or flex property) as follows:

.quarter {
  flex: 0 1 25%;
}

...and that should cover it.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}
.quarter {
  flex: 0 1 25%;
  padding: 20px;
  background-color: #b5d46e;
  border: 3px solid white;
  color: white;
  font-size: 1.5em;
  text-align: center;
}
<div class='flex-container'>
  <div class='quarter flex-item'>
    <h3>1</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>2</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>3</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>4</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>5</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>6</h3>
  </div>
  <div class='quarter flex-item'>
    <h3>7</h3>
  </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

The layout created with Tailwind did not meet our expectations in terms of the value obtained

Choose the shape you desire. Click here to view image The current shape looks like this... Click here to view image bar : h-14 nav : h-full content : h-full footer : h-14 I am trying to create a layout similar to this using tailwind CSS, but it's no ...

cssreactjslayouttailwind-css

What is the best method for gracefully opening external links in a reusable new tab?

Here is the progress I have made so far: <script> var win; function OpenInNewTab(url ) { // var win; if (win) { win.close(); } win =window.open(url, 'myWin'); win.focus(); } </script> My links are structured like ...

htmljavascripthyperlinkanchor

Creating multiple nested ng-repeats in an AngularJS table

Managing a large amount of data on users' availability by hour for multiple days can be challenging. The data is structured as follows: availData = { "date1":arrayOfUsers, "date2":arrayOfUsers, ... } arrayOfUsers= [ userArray, userArray, ... ] user ...

javascripthtmlangularjs

The wrapAll() method can be used to wrap list items within two columns

I am looking to group multiple li elements within two div containers by using jQuery's wrapAll method. The challenge lies in the fact that these items are rendered within a single <ul> element via a CMS. Here is the current setup: <ul> ...

javascriptjqueryhtmlcss

Tips for concealing a parent element while inside a span with jquery

Beginner asking for help! Take a look at what I've coded: <div class="Links"> <a href="/testthis1.html" data-id="button1"> <img class="icon" src="/test1.png" alt="test1"> <span>Test 1</span> < ...

jqueryhtmlhideparent

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

cssweb

Press the Concealed Button Enclosed in a div Using Selenium with Python

Currently, I am in the process of automating the login on the Workday portal by utilizing Chrome WebDriver in Selenium. My main challenge lies in figuring out how to click on a hidden sign-in button with the following properties: <div class="css-1s ...

pythonhtmlselenium-webdriverwai-ariahidden-field

Alter the color of the initially chosen option in the dropdown selection

I'm struggling to modify the color of the initial selection while keeping the remaining selection-options at their default black color. Unfortunately, I haven't been successful in achieving this. Currently, all colors are #ccc. What I want is fo ...

javascriptjqueryhtmlcss

Bootstrap 5 does not support tab navigation functionality

I created a new HTML page, and I encountered an issue while trying to enable tabs using JavaScript. <html> <head> <title>Excel Viewer</title> <link hr ...

javascripthtmlbootstrap-5

PHP working in certain directories, but not all

I currently have a few basic html websites that feature a contact form which successfully sends emails using PHP. Recently, I decided to create another website utilizing the same contact form PHP script. However, upon submitting the form on this new websit ...

phphtml.htaccessweb-hosting

Blending images together can obscure surrounding elements

Is there a way to make two images crossfade on hover without hiding the text underneath? I need the text to show below the image, not behind it. Any suggestions on how to solve this issue? #center { text-align: center; } #under { text-align: cente ...

htmlcss

The default theme has not been specified in Tailwind CSS

During my recent project, I utilized React, Next.js in combination with Tailwind CSS. In this project, I delved into styling customization by implementing react-slick for a specialized slider. To achieve the desired aesthetic, I made modifications to the r ...

javascriptcssreactjstailwind-cssreact-slick

I am facing an issue with grabbing text using simple HTML DOM in PHP with cURL

I have implemented the following code in my script to extract a specific part of the source code that I require, but I encountered this error: Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE, expecting ')' in /home/cyberhos/pub ...

phphtmlparsingdomcurl

What is the best way to indicate progress as the canvas resizes an image?

Is there a way for me to access progress updates? My main focus is on receiving progress information, regardless of how it will be displayed. I may choose to use a progress bar in the future, but my current inquiry pertains solely to obtaining the data it ...

javascripthtmlcanvas

The nested navigation bar is not displaying properly below the main navigation bar

Hey there! I'm having a bit of trouble with adding a nested nav within my main nav. The issue is that the nested nav isn't aligning properly under the main nav. Take a look at this screenshot for reference. The nested nav seems to be shifted abou ...

htmlcssflexboxresponsivenav

What is the best way to apply a class to the grandparent div of an element in AngularJS?

Currently, I have a dynamically generated list of tests: <script id="TestsTemplate" type="text/ng-template"> <article class="tests-main"> <section class="tests"> <div class="test" ng-repeat="test in ...

javascripthtmlangularjs

Enhance the user experience with a personalized video player interface

I am facing difficulty in creating a responsive video with custom controls. While I understand that using a <figure></figure> element and setting the width to 100% makes the video responsive, I am struggling with making the progress bar also r ...

javascriptcsshtmlvideo

Inserting a singular image following a designated list item

I have a question that may seem silly, but I'm trying to understand a specific CSS styling issue. I want to add an image targeting a particular li item. Currently, the code adds the image after all the li items: .menuStyling li:after{ content: u ...

htmlcss

Our website features a dynamic functionality where users can select from two dropdown lists with identical values. Upon selecting multiple values from the first dropdown, the corresponding values in

When selecting multiple values from the first dropdown list, the second dropdown list will automatically have the same value selected as the first dropdown. ...

javascriptjqueryhtmljspbootstrap-4

Switch up div containers with JavaScript based on the set array order of elements?

As I work on creating a list that calculates the sum of selected numbers, I encountered an issue with rearranging the items. Despite successful functionalities like adding images with names, changing languages, and performing calculations, the page keeps r ...

javascripthtml