Posts

Showing posts with the label flexbox

Flexbox fill available space vertically

Image
Clash Royale CLAN TAG #URR8PPP Flexbox fill available space vertically Now in a flexbox row I can write <div layout="row"> <div>some content</div> <div flex></div> <!-- fills/grows available space --> <div>another content</div> </div> I would like to achieve the same but vertically, like on this picture Currently the problem is that the div which would need to grow doesn't have any height so the two contents are below each other. I want my second content to be at the bottom of the parent container which have a fix height! I know I could solve this by positioning the second content absolute and bottom: 0; but can I achieve this with flexbox? bottom: 0; 2 Answers 2 So you can try this: flex-direction: column for the flex container. flex-direction: column flex: 1 for the element that needs to fill the remaining space. flex: 1 ...

how to put a fixed element so that the text is put under it using flex box

Image
Clash Royale CLAN TAG #URR8PPP how to put a fixed element so that the text is put under it using flex box I just did a flexbox course and I'm practicing. so this question would like to find the solution by applying flexbox concepts. in this case I have 2 articles, and I would like the second article to be always in that position and the text of the first article can be put under it. The size of each article is currently respected. how can I do it? This is my code: <section> <article class="box1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dolorum ad perferendis eligendi inventore quo deserunt omnis impedit culpa blanditiis, sapiente pariatur a totam cumque, odit incidunt ipsum delectus provident. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit dignissimos, quos id rerum doloremque, dicta odio et perspiciatis officia dolorum amet quaerat doloribus ea sequi porro odit tenetur pariatur. Placeat. </article>...

Flexbox layout for 5 boxes with big box in the midde

Image
Clash Royale CLAN TAG #URR8PPP Flexbox layout for 5 boxes with big box in the midde . I need to create a section wherein the pink box is between a white and blue section. So I decided that maybe flex is the best way to do this (correct me otherwise). When seen in mobile I'm expecting the whole pink box width will be 100% and the left and right (white /blue) section will be hidden. somehow related to codepen.io/Paulie-D/pen/LNQMML but I need the bigger box in the middle. and the left and right boxes hides on mobile. So have you tried anything so far? Please attempt something, then update your question to show a specific problem you're having in a minimal, complete, and verifiable example . – Obsidian Age 2 hours ago Paulie_D will be upset seeing his...