0

Current: Current Desired: Desired

Can this be achieved using the flex —or grid— model? Or I must rewrite the structure using a different approach?

This is the code:

.sections { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 0em -1em 2em -1em; } .box { position: relative; display: inline-block; flex-grow: 0; min-width: 300px; max-width: 420px; margin: 1em; border-radius: 10px; padding: 1em; vertical-align: top; } .elements { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 1em 0em 0em 0em; } .itm { position: relative; display: inline-block; flex-grow: 0; width: 100px; margin: 1em; text-align: center; border-radius: 10px; box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%); padding: 0.5em; vertical-align: top; }
<div class="section"> <div class="box"> <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p> <div class="elements"> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> </div> </div> <div class="box"> <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p> <div class="elements"> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> </div> </div> <div class="box"> <p>Short text short text </p> <div class="elements"> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> </div> </div> </div>

Improve this question
1
  • Part of the problem is that sections =/= section. You have a misspelling in your class. Commented Jun 14, 2022 at 19:56

3 Answers 3

Reset to default
2

You could add the following to have your paragraph tag take up space to push the items down by adding:

.box > p { flex: 1; } 

.section { display: flex; flex-direction: row; flex-wrap: wrap; } .box { display: flex; flex-direction: column; border: 2px solid lightcoral; min-width: 300px; max-width: 420px; margin: 1em; border-radius: 10px; padding: 1em; } .box > p { flex: 1; } .elements { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 1em 0em 0em 0em; } .itm { position: relative; display: inline-block; margin: 1em; text-align: center; border-radius: 10px; box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%); padding: 0.5em; }
<div class="section"> <div class="box"> <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p> <div class="elements"> <div class="itm"><p>asdf asdf</p></div> <div class="itm"><p>asdf asdf</p></div> <div class="itm"><p>asdf asdf</p></div> </div> </div> <div class="box"> <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p> <div class="elements"> <div class="itm"><p>asdf asdf</p></div> <div class="itm"><p>asdf asdf</p></div> <div class="itm"><p>asdf asdf</p></div> </div> </div> <div class="box"> <p>Short text short text </p> <div class="elements"> <div class="itm"><p>asdf asdf</p></div> <div class="itm"><p>asdf asdf</p></div> <div class="itm"><p>asdf asdf</p></div> </div> </div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Good idea, but I'd consider wrapping the paragraph with a div having those styles in case there are multiple. Then it still works.
1

Just make the content boxes flex columns and apply justify-content: space-between. That spreads the two child elements. If you happen to have multiple paragraphs, put them in a single div to keep flex children to two.

Also note the removal of vertical-align, position, and display properties. They generally aren't needed with flex layouts.

Some styles hidden for demonstration purposes.

.section { display: flex; flex-direction: row; /* flex-wrap: wrap; */ justify-content: flex-start; margin: 0em -1em 2em -1em; } .box { display: flex; flex-direction: column; justify-content: space-between; flex-grow: 0; /* min-width: 300px; */ /* max-width: 420px; */ margin: 1em; border-radius: 10px; padding: 1em; } .elements { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 1em 0em 0em 0em; } .itm { flex-grow: 0; width: 100px; margin: 1em; text-align: center; border-radius: 10px; box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%); padding: 0.5em; vertical-align: top; }
<div class="section"> <div class="box"> <p>Long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text long text </p> <div class="elements"> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> </div> </div> <div class="box"> <p>Medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text medium text </p> <div class="elements"> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> </div> </div> <div class="box"> <p>Short text short text </p> <div class="elements"> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> <div class="itm"> <p>asdf asdf</p> </div> </div> </div> </div>

Improve this answer

Comments

0

Try adding margin-top: 5px; , to the "itm" class

.itm { margin-top: 5px; position: relative; display: inline-block; flex-grow: 0; width: 100px; margin: 1em; text-align: center; border-radius: 10px; box-shadow: 0px 5px 8px 2px rgb(0 0 0 / 20%); padding: 0.5em; vertical-align: top; }
Improve this answer

1 Comment

Padding and margin aren't effective alignment mechanisms. You should copy the snippet down to demonstrate your solution.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.