Flexbox: Items in class1 and class2 should fall under each other that means not in one row

HTML & CSS
1 
<div class="some-class">
        <div class="class1"></div>
        <div class="class2"></div>    
 </div>

I have given .some-class display:flex;

#My Requirement → #

Items in class1 and class2 should fall under each other that means not in one row. I have forgotten the property of flex. Is it flex-direction?

2

Why?

coothead

1 Like
3

Yes, it defaults to row. You want column if the items are to be vertically stacked.
Were you not using flex (assuming it is required for this particular layout) I would question the use of span, it being an inline element when you seem to want block behaviour.

1 Like
5

Question Modified

6

That can get confusing, changing questions after they have been answered. It means that some of the answers no longer make sense. :rolleyes:
If you want to show us your modified code, put it in a new post.

Additionally I notice that you changed the <cite> for a <div> too. I never questioned the use of cite.
span and div are semantically inert, so could be interchangeable depending whether a block or inline element is suitable.
But cite does have semantic meaning, so if the content of that element is a citation, the element should remain as cite and css used to display it as required.

2 Likes
7

As your modified code stands then you don’t need to do anything at all as the natural flow of block elements is under each other. Remove all flex rules and the code will stack normally.

Only use flex when you have a need for it.

If your question is actually about how flex works then you may need to re-phrase the question :). To make ‘flex items’ occupy a whole row you can use flex:1 0 100% or width:100% assuming the parent has flex-wrap:wrap applied as the default is nowrap.

If you are making columns then we need to know more about what you are trying to achieve but as far as the modified code you have shown us you don’t need flex at all to do this.

2 Likes
8

sir,

I was tried to reach such arrangement → https://www.screencast.com/t/UDhn9hF3S

9

If you are talking about the small ‘media unit’ then there are various ways you can do this.

Here’s 3 examples for starters.

You would need to use media queries to drop them down to one line each for smaller screens if you have larger images or want more space etc.

2 Likes
10

Hi there codeispoetry,

check out the attachment to see a fourth example,
which matches your actual image link. :winky:

codeispoetry.zip (4.7 KB)

coothead

3 Likes
11

Nice You did this w/o using Flex.

12

tl:dr
Don’t apply flex to everything!

Flex really isn’t necessary for something like this, which is what we have been hinting at.
In fact it’s not necessary for lots of things.
Stop thinking that flex is to “go-to” tool for every layout, it’s not, there are usually simpler methods.
It’s only “necessary” or useful in a few instances that require its special capabilities.

3 Likes
13

I certainly did. :winky:

But I did not use “classes for nothing”. :rofl:

coothead

3 Likes
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.