12 Replies
yeah, nobody is going to read 8.19kb of code and guess which flex isnt working
can you shorten it to the minimum reproducible example and put it in codepen or jsfiddle or something?
let me try
just guessing - in your rows style
You change flex-direction, so the justify and align axis switch. Try using align-items there.
https://jsfiddle.net/Giveth_23/nuv74e1m/1/
I left a comment in the css section where there is justify content
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
I did that it still did not work. The flex box works.
Let me explain abit more. If you set
flex-direction: row;
align-items: center;
Then it works perfectly fine but the flex item inside the parent would look disorganised and that is not want i want it.
But, when i set flex-direction
flex-direction: column;
align-item: center;
they just align them horizontally but not vertically
I do not know the cause or why the flex items are acting in that manner
for your columns with the class
.row1, .row2 and .row3, just add this:
and remove the width
also: DO NOT USE BORDERS TO SHOW THE LAYOUT
it changes the layout, making them absolutely useless
use outlines
to tighten it up, also use a
text-align: center:
i presume this is what you wanted
but honestly, why don't you use grid for this?
Thanks for the tip
I used borders coz that is how i do it when am creating the layout. I will learn how to use grid
👍
the problem with borders is that you aren't working with the real area that the elements take
you're working with the size plus/minus a few pixels, which will lead to layout differences