I am trying to create a grid of 4 square divs that stack on top of each other when the browser is resized to mobile size. I also need to put vertically and horizontally centered text in each div. To make things even more complicated for me, each div's width is defined as a percentage, not as an absolute value.
Is this even possible to achieve?
Yes this is possible. I prefer Flexbox for this. Read up on it e.g. here
Related
I am trying to achieve an effect contrary to that promoted with flexbox. I have a 3x3 div layout and I want the center div to stay fixed in the middle of the screen and the 8 divs around it to be shown only in part (this is, if the set of 9 divs is larger than the screen).
As far as I could investigate, flexbox always brings solutions to avoid this effect, and I want to provoke it.
Is there a css command to keep this design fixed in the center so that it is not deformed, and its size is independent of the screen size?
use css max-width:250px; or width:250px; with css media query
refer link [https://www.w3schools.com/cssref/pr_dim_width.asp][1]
It's my understanding that flexbox containers and their child items flex fully along only one axis, depending on the value of the flex-direction property, row or column. With a "row" container, you can stretch and shrink the width of the container and the individual boxes it contains, but the content in those boxes does not grow or shrink to match. On the other hand, resizing a window vertically does cause content to resize accordingly. (I think the situation is vice versa with "column" containers, though I haven't tried them alone.)
So my questions:
Do I have that right? I've read through many nice blog posts on flexboxes, but none covered this characteristic explicitly as a main 'feature.'
Is there a flexbox-only workaround, some arrangement of rows-inside-columns or the other way around, maybe with specific properties set special ways?
I tried putting a columnar container inside a flexbox belonging to a row container, and then putting text into that, but I saw no change in resizing behavior--the text still resizes only when the window/viewbox is resized vertically, not horizontally. See this codepen.
(About the example: first, I apologize for extraneous properties or properties set to random-ish values, but I was trying anything and everything. I tried to pare them back without messing up the demo but I'm sure there's much to improve. The svg logo on the left is just in a top-level flexbox in the main container for that row--it behaves as expected, shrinking/growing only with vertical window resizes. I put a hidden logo in a third box on the right so with equal-width boxes on either side, the text between them comes out centered in the viewbox, if you don't use shrink too much side to side. Maybe there's a less kludgy way with flexbox to a row with centered text and a logo on the left.)
I am trying to achieve the following layout for one of the pages I am building using bootstrap 4.
Sections 1 and 2 are basically container fluids with col-4/col-8 and col-5/col-7 layouts and have a background image or background color.
On top of this I have to place a div with some text and button, and depending on the placement, left or right column, the content must be confined to the size of container i.e. left and right margins same as set by container. This also needs to be responsive in nature.
I have tried adding margins based on media queries that seems to be a very ugly solution.
How do I achieve this in a more efficient way?
Thanks!!
I'm building a website with fluid layout and I want avoid things like setting dimensions. I'm having success in almost everything, but I have a div that doesn't work as expected. See this link: http://cssdesk.com/Bshqe.
I expect that "div_botao_comecar_convite_cadastro_b" were placed to the right of "div_descricao_curta_convite_cadastro_b", but it was placed below this div. I want that the div be placed at left.
As I say, I don't want set a width for anyone div. Sorry for bad english. Thanks in advance.
If you don't want to set a specific width but want the children elements aligned horizontally, use css3 flexboxes -
apply display:flex to #div_elementos_convite_cadastro_b and adjust the other css accordingly....
demo
more about flexboxes # CSSTricks
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.