Combining the p class with flexbox for optimal layout design

I have four flexed container boxes and I am looking to add text below them in a row. Does anyone have suggestions on how I can achieve this alignment, as well as tips for optimizing the code?

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

p {}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>
</div>

<div class="subtext">
  <p class="sub">
    <div class="box1">
      Wow !
    </div>
    <div class="box2">
      Wow !
    </div>
    <div class="box3">
      Wow !
    </div>
    <div class="box4">
      Wow !
    </div>
</div>

htmlcsstextflexbox

Answer №1

It's best to group the boxes and text together for cleaner markup and fewer potential issues. While you can keep them separate, bundling them up is a more organized approach.

.container {
  display: flex;
  /* flex-direction: row; - not needed (default) */
  justify-content: space-around;
  align-items: center;
}

.container>div {
  flex: 1;
  text-align: center;
}

.square {
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}
<div class="container">
  <div>
    <div class="square"></div>
    <p>Paragraph 1.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 2.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 3.</p>
  </div>

  <div>
    <div class="square"></div>
    <p>Paragraph 4.</p>
  </div>
</div>

Answer №2

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.square {
  flex: 1;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}

.subtext {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
<div class="container">
  <div class="square one"></div>
  <div class="square two"></div>
  <div class="square three"></div>
  <div class="square four"></div>
</div>

<div class="subtext">
  <div class="box1">Amazing!</div>
  <div class="box2">Incredible!</div>
  <div class="box3">Astounding!</div>
  <div class="box4">Unbelievable!</div>
</div>

<p>This text appears below the displayed boxes</p>

Answer №3

Apply the CSS property position absolute to paragraph elements and position relative to their parent element.

Wow!
Wow!
Wow!
Wow!

Answer №4

To create a neat grouping of elements, you can place them within invisible containers and utilize the text-align: center property. Here is an illustration:

.flexbox {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  justify-content: space-evenly;
}

.flexbox article {
  text-align: center;
}

.flexbox div {
  font-size: 4em;
  width: 96px;
  flex-direction: column;
  background-color: white;
  border: solid;
  border-color: #3882f6;
  border-radius: 8px;
  margin: 33px;
  height: 150px;
}
<div class="flexbox">
  <article><div id="box1">1</div><p>One</p></article>
  <article><div id="box2">2</div><p>Two</p></article>
  <article><div id="box3">3</div><p>Three</p></article>
  <article><div id="box4">4</div><p>Four</p></article>
</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

What is the best way to display overflow on my website without using the overflow attribute?

When I am setting up an online chat function, here is a brief overview of the client-side code I use: .msgln { margin: 0 0 2px 0; padding: 0.5%; border: 3px solid #eee; } #chatbox { text-align: left; margin: 0 auto; margin-botto ...

htmlcss

What should I do when dealing with multiple submit buttons in NextJS?

How can I differentiate between two submit buttons in a form component created in Next.js? I'm struggling to determine which button was pressed and need help resolving this issue. import React from "react"; const LoginPage = () => { as ...

htmltypescriptnext.jsprisma

Putting a Pause on CSS Transition using jQuery

I am attempting to delay a CSS transition for an element by using a delay function, with an additional 0.2s applied to make it slide 0.2s later than the initial delay of the main wrapper. I am applying a class to give it a transition effect to slide from r ...

javascriptjqueryhtmlcss

I have a dynamic form code that allows users to insert data by adding multiple inputs in a row. However, I would like to modify it so that the inputs are added in a column instead

I found this code online that allows users to add extra inputs, but it currently only creates new rows in the database. I would like these inputs to be inserted into different columns within the same row. How can I modify it to achieve this? I have alread ...

phphtmlcssmysql

When selecting an option triggers a pop-up in JavaScript

Implementing javascript and HTML. Consider this example: <select name='test' > <option value='1'> <option value='2'> <option value='3'> </select> If the user selects optio ...

javascripthtmlselectpopup

What is the best way to ensure that two divs in the same row float in opposite directions?

Check out this JSFiddle to see what I have done so far: JSFiddle Link html <div class="results"> <h2>Some data</h2> <ul style="margin:0;padding:0;"> <li class="resultsListItem" style="list-style-type: none;"> ...

htmlcssalignmentcss-float

Ensuring Equal Padding on Both Sides of a Div by Setting its Width

In search of a div that houses multiple inner divs with equal padding on the left and right edges. This is crucial for maintaining a fluid layout where the distance between the inner divs and outer div border remains consistent even when the window size ch ...

jquerycssliquid-layoutcenter-align

Unable to set the height for ul/div elements

I'm struggling to make my navbar appear when I click the "menu button". The div seems to be present in the code, but with a height of 0. Here's the relevant section of the code causing the issue. Any suggestions on how I can resolve this? var ...

javascripthtmlcssheight

Spacing that separates elements vertically within a listing

I'm facing an issue with a list of elements arranged in a row that wraps onto a second line due to space constraints within the container. Is there a way for me to introduce additional spacing between the first and second line of these elements, bear ...

htmlcssspacing

The audio must start playing prior to being forwarded to a new page

As I delve into the world of website development on my own, I have encountered an interesting challenge. At the top of my webpage, I have embedded an audio file within a button. If the user chooses to mute the audio, the navigation links will remain silent ...

javascriptcsshtmlaudio

Difficulty in obtaining the child index upon clicking

I am currently working on retrieving the index of a child element within a parent element. While following a solution here, I encountered an issue with an infinite loop. This is the code I have written so far: var div = document.getElementById("spans ...

javascripthtml

Is there a way to make the onKeyDown event function properly in Next.js/React?

I'm currently developing a website with Next.js and am facing an issue trying to execute a simple function when a key is pressed. Strangely, the onKeyDown event isn't getting triggered as expected in my code snippet: <main onKeyDown={e => c ...

javascripthtmlreactjsnext.jsreact-component

Enable or disable options with the user's permission

Currently, I am developing a WordPress plugin that will display a simple div on all pages. The code is set up to create the div, turn it into a shortcode, and then show it on each page. I want to include a checkbox in the admin settings so that users can ...

javascriptjqueryhtmlwordpress

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

javascripthtmlcss

Tips for transforming a date into a time ago representation

Can someone help me with converting a date field into a "timeago" format using jquery.timeago.js? $("time.timeago").timeago(); var userSpan = document.createElement("span"); userSpan.setAttribute("class", "text-muted"); userSpan.appendChild(document.crea ...

javascripthtmltimetimeago

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below: https://i.sstatic.net/EFAlM.jpg Here is the HTML code I have developed so far: & ...

javascripthtmlcssbootstrap-4

Having trouble with the initial tap not being recognized on your mobile browser?

When using mobile web browsers (specifically chrome and firefox on iOS), I am experiencing an issue where the hamburger menu does not trigger when tapped for the first time. For a simplified version of the HTML/CSS/JS code, you can check it out at: https ...

javascripthtmlcssmobile

The `background-size` property in jQuery is not functioning as expected

I am facing the following issue: When I click on a div with absolute positioning, I want to animate its position, width, and height. In addition, I want to change the background-size using jQuery. However, the problem is that all CSS properties are updat ...

javascriptjqueryhtmlcss

Help with enabling the recognition of backspace key in JavaScript?

My current JavaScript is almost perfect but missing one key element. The form has two fields that are disabled when the user fills it out. <label>Can you drive? </label> <input type="booleam" id="drive" disabled><br> <label>W ...

javascripthtml

"Move a div towards the mouse's location by animating it with JavaScript when

I've been working on making the ball element move and shrink towards the goals upon mouse click. I successfully created a function that captures the mouse click coordinates in the goals, but I'm facing challenges with the ball animation. I consi ...

javascripthtmlcss