Arranging items in a flex container

My goal is to achieve the following layout with flexbox:

#box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  justify-items: center;
  align-items: center;
}

#spotLight img {
  width: 15%;
  height: 15%;
}

#spotLight h2 {
  flex: 100%;
  text-align: center;
}

#spotLight p,
h3 {
  width: 20%;
  align-self: flex-start;
}
<div id="box">
  <h2>Our product:</h2>
  <img src="productphoto.jpeg" />
  <h3>This product is in promotion!</h3>
  <p>
    description of product
  </p>
</div>

I am struggling to make the 

<p>description of product</p>
appear directly below the 
<h3>This product is in promotion!</h3>
, just like in the provided image.

htmlcss

Answer №1

Did you try out the CSS gridbox before? Using it can offer a neat and easily readable solution to your issue. Here's a JS Fiddle showcasing the solution for your layout.

The key point to observe here is how the grid-template-areas functions to establish the correct element arrangement. To achieve this particular layout, you simply require 3 CSS properties within your wrapper class:

display: grid;
  grid-template-areas:
    'header header header header'
    'menu menu menu main'
    'menu menu menu right';
  grid-gap: 10px;

Feel free to check out the link I've included to the official gridbox documentation and explore the provided fiddle with the solution for more detailed clarification.

Answer №2

To enhance the styling of your text, I have enclosed it within a container and switched your css selector from #spotlight to #box

    #box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      justify-content: center;
      justify-items: center;
      align-items: center;
    }

    #box img {
      width: 15%;
      height: 15%;
    }

    #box h2 {
      flex: 100%;
      text-align: center;
    }

    #box p,
    h3 {
      width: 20%;
      align-self: flex-start;
    }
<div id="box">
  <h2>Introducing our latest product:</h2>
  <img src="https://picsum.photos/200/300" />
  <div class="wrapper">

    <h3>Exciting promotion alert!</h3>
    <p>
      Brief overview of the product
    </p>
  </div>
</div>

Answer №3

If you're looking to maintain the HTML structure while utilizing flex, there is a workaround that involves using the technique of margin-left: 50%:

#box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#box > * {
  border: solid 1px rgba(0, 0, 0, 0.5);
  margin: 0;
}

#box h2 {
  flex: 100%;
}

#box img {
  flex: 0 1 50%;
  width: 50%;
}

#box h3,
#box p {
  flex: 1;
}

#box h3 {
  align-self: flex-start;
}

#box p {
  margin-left: -50%;
  align-self: flex-end;
}
<div id="box">
  <h2>Check out our latest product:</h2>
  <img src="https://example.com/product-image.jpg" />
  <h3>Special offer available now!</h3>
  <p>Product description goes here</p>
</div>

Answer №4

Discover the magic of flexbox in CSS. Learn how to utilize flex properties effectively.

  @media(min-width:468px) {
  .container-1{
  display:flex;
  /* align-items:flex-start; */
  /* align-items:flex-end; */
  /* align-items:center; */
  /* flex-direction:column; */

  }
  .container-2{
    display:flex;
    /* justify-content:flex-start; */
    /* justify-content:flex-end; */
    /* justify-content:center; */
    justify-content:space-between;

  }
    }
    .container-3{
      display:flex;
      /* justify-content:flex-start; */
      /* justify-content:flex-end; */
      /* justify-content:center; */
      flex-wrap:wrap;
      justify-content:space-between;

    }
  .container-1 div, .container-2 div, .container-3 div{
    border:1px solid red;
    padding:10px;
  }
  .box-1{
  flex:2;
  order:3;
  }
  .box-2{
   flex:2;
   order:1;
  }
  .box-3{
  flex:1;
  order:2;
  }
  .box-container-2{
    /* width:27%; */
    flex-basis:30%;
  }
  .box-container-3{
    /* width:27%; */
    flex-basis:10%;
  }
<!DOCTYPE html>
<html>
<head>
 <title> Flex </title>
</head> 

<body>
<div class="container-1">
  <div class="box-1">
    <h3>Box one</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-2">
    <h3>Box two</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-3">
    <h3>Box Three</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
</div>

<div class="container-2">
  <div class="box-container-2">
    <h3>Box Four</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-2">
    <h3>Box Five</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-2">
    <h3>Box Six</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
</div>
<div class="container-3">
  <div class="box-container-3">
    <h3>Box seven</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-3">
    <h3>Box 8</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-3">
    <h3>Box 9</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-3">
    <h3>Box 10</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-3">
    <h3>Box 11</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
  <div class="box-container-3">
    <h3>Box 12</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
  </div>
</div>
</body>
</html>

Answer №5

The solution can be found below:

html {
  padding: 30px;
}

.bordered {
  border: 3px solid black;
}

.flexible {
  display: flex;
  justify-content: center;
  align-items: center;
}

header {
  height: 50px;
  
}

.wrapper {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

section {
  order: 0;
}

section p {
margin: 0;
}

aside {
  order: 1;
  flex-grow: 1;
}

aside .child {
  height: 150px;
  margin: 0 0 10px 10px;
}
<div id="box">
  <header class="flexible bordered">HEADER</header>
  <div class="wrapper">
  <section>
    <div class="image">
    <img src="http://via.placeholder.com/300x320" alt="">
    </div>
  </section>
    <aside>
      <div class="child flexible bordered">Text</div>
      <div class="child flexible bordered">Text</div>
    </aside>
  </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

Tips for improving the loading speed of my website

What are the best ways to improve website optimization and increase page speed? I have already minified JavaScript and CSS, as well as optimized images, but Google continues to penalize our pages. Any suggestions? ...

jquerycss.net

Variables are losing their way in the vast expanse of self-submitting

I have a form that needs to be submitted on the same page (index.php) and I want to capture the entered information as a JavaScript variable. <?php $loginid = $_POST[username] . $_POST[password]; ?> Here is some basic code: <script> var pass ...

javascriptphphtmlforms

Clicking 'Back to Top' within an accordion

On my webpage, I have two scrolls present. One is clearly visible on the page (not loaded with ajax), while the other one is located inside an accordion. Both of them share the same class names. I want these scrolls to always be positioned at the top. I&a ...

javascriptjqueryhtmlcsstwitter-bootstrap-4

Mobile devices not displaying background images correctly

My Wordpress website has a section with the code below, but the image is not adjusting properly on mobile phones. Can you provide some advice? .one_half_bg { width: 50%; float: left; background-position: 50% 50% !important; backgroun ...

wordpresscss

Issues with adjusting the height using CSS transformations are not being resolved

There seems to be an issue with animating the height property of an element as it is not animating at all. Check out the fiddle where the animation is attempted. Here is the HTML: <ul> <li> li 1 </li> <li> ...

javascriptjquerycss

The TipTap Editor does not properly register spaces

In our project, we are utilizing the TipTap rich text editor. However, we are encountering an issue where spaces are not being recognized correctly - a space is only created after every 2 clicks. Our framework of choice is Vue.JS. import { Editor, EditorC ...

javascripthtmlvue.jsfrontendtiptap

A guide to connecting keyboard events to div elements within a React application

Currently working on a basic react project to gain some practical experience with the library. I aim to develop a simple user interface with blank spaces to be filled in by typing via keyboard input. Here's a glimpse of my progress so far: function ...

javascripthtmlreactjsreact-hooks

The server is currently pointing towards my local C drive directory instead of the desired message location

My goal is to create a functionality where, upon clicking the calculate button (without performing any calculations yet), the user will be redirected to a new screen displaying a response message that says "Thanks for posting that!". However, instead of th ...

javascripthtmlnode.jsexpress

`Why are my overflow-x and flex-wrap not functioning as expected in React JS?`

Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css: body { background: #141414; color: ...

cssreactjsrowoverflow

JavaScript code is failing to render data properly within HTML documents

I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...

javascripthtml

Troubleshooting Problems with CSS Span Placement

Challenges with Span Positioning in CSS Currently, I am encountering difficulties while working on the index.html.erb file for an example Rails website. Below is a snippet of the HTML code I am struggling with (please note that this is simply a fabricated ...

htmlcssruby-on-railscss-position

-moz-box-reflect - Styling for FireFox

I've been attempting to achieve a similar effect to this tutorial at http://designshack.net/tutorialexamples/HoverEffects/Ex5.html. However, I'm encountering issues with getting the reflection of the image to display properly in IE and Firefox. H ...

htmlcssinternet-explorer

How to convey emotions through Material UI MenuProps to customize paper root classes

Utilizing Material UI for a Select menu along with Emotion for custom styling. I am facing a challenge where I need to customize the root classes (MuiPaper-root or MuiMenu-paper) of the menu popover once a menu item inside the Select menu is clicked. Inc ...

cssreactjsmaterial-uiemotion

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

I am looking to customize the appearance of the drop-down list in the v-autocomplete component by adding a border-radius style, as depicted in the image below. The current design I have achieved closely resembles the visual shown below. Previously, I app ...

javascriptcssvue.jsvuetify.jsv-autocomplete

Is it possible to nest clicks for ajax calls within the results of a previously appended call?

As I dive into learning about AJAX to enhance page loading speed by avoiding reliance on PHP for displaying results, I've encountered a challenge. I have three tiers of data distributed across three database tables: The first tier of data is fetche ...

phpjqueryhtmlajaxnested

Attempting to retrieve and substitute the final value within an input field by cross-referencing or evaluating it against a different value

Can you help me with a solution for fetching the last value (word or character) in an input box, storing it in a variable, and then replacing it with one of a set of values that match exactly or partially? The items within the bindname-block contain vario ...

javascriptjqueryhtml

What is the best way to adjust the size of a DIV containing a background

Recently, I've been delving into the world of CSS3 and have encountered an issue where the height of a DIV does not adjust as the background image expands. Ideally, the DIV should expand along with the background image. Following the DIV, there will b ...

htmlbackground-image

Is it possible to examine elements within Outlook?

Creating HTML emails can be quite the challenge, especially when trying to make them compatible with Outlook. Is there a method to inspect elements in Outlook similar to how we do on a browser's console? ...

htmlemailhtml-emailemail-client

What is the best way to retrieve the parent element in jQuery when you already have the child element selected

I am working with jQuery Mobile, which automatically generates a lot of the DOM structure. The challenge I am facing is removing radio buttons without having an id for the parent div due to the HTML construction in jQuery Mobile. While I can easily targe ...

javascriptjqueryhtmldomjquery-mobile

Problem with jQuery's .prepend method being called twice on list items

Looking to enhance the appearance of a list by adding some icons before the anchor links within each list item. <ul class="submenu-children"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> ...

javascriptjqueryhtmlappend