How can you make divs adapt to screen resizing in a similar way to images?

Question

How can you make divs adapt to screen resizing in a similar way to images?

In my REACT project, I am faced with the challenge of positioning three divs next to each other, with a small margin between them, and ensuring they are horizontally centered on the screen.

As the screen width decreases, I need the right-most div to move below the first two while still maintaining horizontal alignment.

Finally, as the screen size shrinks further, all three divs should transition into a column layout at the center of the screen.

While achieving this with images is straightforward:

HTML (using REACT's JSX syntax):

<div id='container'>
    <img src={image}/>
    <img src={image}/>
    <img src={image}/>
<div/>

It becomes more challenging for non-image elements. How can we achieve a similar layout using different objects?

html css reactjs

Answer 1

Answer №1

Welcome to the world of coding! I believe what you're searching for is the magic of CSS flexbox. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox.

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

.childClass { // Don't forget to assign a className to your children
  width: // Specify the width of your divs here, this will help with wrapping
  flex-grow: 0;
  flex-shrink: 0;
}

I believe following these instructions should solve your problem, but I do recommend delving deeper into flexbox by checking out https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - it's an invaluable resource for mastering flexbox layouts.

Answer 2

Welcome to the world of coding! I believe what you're searching for is the magic of CSS flexbox. You can learn more about it here: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox.

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

.childClass { // Don't forget to assign a className to your children
  width: // Specify the width of your divs here, this will help with wrapping
  flex-grow: 0;
  flex-shrink: 0;
}

I believe following these instructions should solve your problem, but I do recommend delving deeper into flexbox by checking out https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - it's an invaluable resource for mastering flexbox layouts.

Answer 3

Answer №2

//implementing flexbox for organizing HTML elements
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.first {
  background-color: red;
  height: 100px;
  width: 100px;
  flex-wrap: wrap;
}

.second {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.third {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

.flex-item {
  padding: 10px;
  margin: 1rem;
}

<div class="container">
  <div class="first flex-item">First div</div>
  <div class="second flex-item">Second div</div>
  <div class="third flex-item">Third div</div>
</div>

for a detailed guide on flexbox, check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

//implementing flexbox for organizing HTML elements
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.first {
  background-color: red;
  height: 100px;
  width: 100px;
  flex-wrap: wrap;
}

.second {
  background-color: blue;
  height: 100px;
  width: 100px;
}

.third {
  background-color: yellow;
  height: 100px;
  width: 100px;
}

.flex-item {
  padding: 10px;
  margin: 1rem;
}

<div class="container">
  <div class="first flex-item">First div</div>
  <div class="second flex-item">Second div</div>
  <div class="third flex-item">Third div</div>
</div>

for a detailed guide on flexbox, check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How can you make divs adapt to screen resizing in a similar way to images?

Answer №1

Answer №2

Similar questions

Guide on adding multiple entries into a PostreSQL database through NodeJS

Why is it possible for an element to be dragged under a MUI dialog backdrop? Shouldn't the modal backdrop be preventing event propagation in

After applying the withStyles and withTranslation higher order components to a React component, a Typescript error is displayed

Modify the innerHTML to adjust font size when a button is clicked in Ionic 5, or eliminate any unnecessary spaces

Encountering an issue with obtaining an undefined value for a URL query parameter when attempting to directly access a

The JSX element 'SubscribeCard' does not contain any construct or call signatures

SCSS: When hovering over one div, display a different div

Leveraging Enum with sec:authorize="hasRole(...)" for user authentication in a Spring Boot and Thymeleaf application

Guide on transforming Div content to json format with the use of jquery

Angular renders HTML elements

Tips for preventing the line through effect on a span element when it is checked

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

Use .load() to set an image as background in the div

What is the best way to create vertical separators between CSS grid elements?

Ways to switch visibility based on user's selection

React is inferring the type of the 'charts' property in the object literal as 'any[]'

Having trouble with playing the appended HTML5 Video?

Guide to adding a tooltip to a "custom layer" in the nivo bar chart

Loading a large quantity of items into state in React Context using Typescript

Guide on eliminating flex in CSS