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.)
Related
Is there a way to create a widget like Morrowind's items list using scene2d.ui? That is, a container where you can put fixed-sized elements and they would stack up in a row (or in a column) until they fill the parent container by width/height, so after that they'd stack up in the next row/column?
In the image you can see scrolling, but I'd still accept an answer that doesn't allow scrolling. Also I'm aware that inline block elements in CSS don't stack vertically (like they do in Morrowind), that's just the closest analogy I can come up with.
I made a set of HorizontalFlowGroup and VerticalFlowGroup widgets to perform that type of layout.
Here's the source of them:
https://github.com/MobiDevelop/maps-editor/blob/master/maps-editor/src/com/mobidevelop/maps/editor/ui/
If you put the HorizontalFlowGroup in a ScrollPane with vertical scroll, it will fill the width then move to the next row, allowing vertical scrolling. If you put a VerticalFlowGroup in a ScrollPane with horizontal scrolling, it will fill the height and move to the next column, allowing for horizontal scrolling. In either case, if you use a uniform size for the child widgets, they will all align as a grid.
Firstly, sorry about the mouthful that is the title.
I'm trying to make a responsive navigation with fluid container and different sized items. I need to know if it's possible (if so how) to keep the spacing between the items the same size for all items while keeping the first and last items flush to the edge of the container.
The red illustrates the spacing, which should be the same between all elements
I can do something like the above with a fixed width pretty easily, but as soon as the window is resized, I can't seem to get the gaps to grow/shrink to the right size.
Percentage margins would seem to be the answer to this but because the container can resize but the items inside cannot, the items either spread onto the next line if the window is too small or not reach the end of the line if the window is too big. I've also tried making the elements a fixed width and then text-align:center; but the spacing not what the designers want.
Has to be compatible with all of the modern browsers and IE 7+
Here's a (badly made) fiddle: http://jsfiddle.net/GGwdW/
Check this solution, might be helpfull: "text-align: justify;" inline-block elements properly?
For old IE's there's text-align-last property.
You can see what I'm going for at http://jsfiddle.net/vW45s/. A center div with two lines of text, and text on the left and right that abuts the text at the bottom of the center div.
I would like the text to be centered on the page (either the main "hello world" or the second line). Right now I'm using an outer div with a specified width and margin: auto. If the width is too large, the text will not appear to be centered; if the width is too small for the inner text, the divs will be stacked: http://jsfiddle.net/vW45s/1/.
Is there a better way to center these three floated divs, while still getting the left and right text to align with the second line of the center div?
Any tips would be appreciated. CSS is not my strong point, but I'm learning.
Floating and centering doesn't mix well. To be able to center something, the browser must be able to determine how wide the element is. To determine it's width, it needs to know how wide the other floating divs are. Their width depends on the width of the element you want to center.
You have these options:
Try to get it to work without assigning a size. It might be possible. Be ready to spend a day or two on this to get it work with Firefox and Chrome and then one week to fix it in IE. ;)
Assign a width to all three divs
Use absolute positioning instead of floating. Make the center column 100% wide and move the side columns in front of it (one left with left: 0 and the other right with right: 0; both will need a definite width). That works until you start resizing the browser window too much (and the side columns start to overlap with the center).
Use a table or display: table-cell because table cells know about their siblings widths without floating. That means you can assign a width to the two side columns and then let the inner column grow.
PS: Yes, I know about the myth that tables are bad. The myth is a gross simplification. It's bad to nest 500 tables to get the design you want if you can get the same result with two divs and some smart CSS. But that doesn't mean you must not use tables at all.
Have you tried adding width: 33% to the left, right, and center divs along with text-align: center?
To get an idea of what the hell I'm on about, please go Here and Here
As you will see there is a side bar and a content area, sidebar is floating left, content floating right, and footer clears both.
Height on the sidebar and content are not set so the divs grow!
However, you can see that if one floating div is bigger than the other, the the background image appears.
I need to know how to make the background colour of both divs always be the same, and grow together in peace and harmony
Thanks
display: table-cell on both divs (and removing the floats) can work easily here, though lower IEs won't like it.
Or, you could always use the infamous Faux Columns
What you are asking is for the two divs to be the same height even though their content height is different. This cannot be done without relying on tables or javascript.
What you can do to achieve the same effect, is have a container div (I can see you already have it) and give this a vertically repeating background image of the sidebar and content color. This is known as Faux Columns.
Make sure to clear within the container (move <div class="clear"></div> up one level) so the container gets the height of whichever div is bigger.
Basically I want to layout a toolbar with some icons on the left and right and a variable sized text field in the middle. I want the text field to take up the remaining space in the middle. The side sections widths are not known ahead of time, they are determined by the number of visible buttons on each side.
The problem is similar to http://www.alistapart.com/d/holygrail/example_4.html except he side column widths can not be hardcoded.
Is it possible to do this purely in CSS?
It sounds like you need display:table-cell
http://www.w3schools.com/css/pr_class_display.asp
Container can be display:table-row and the children can be display:table-cell. I believe that should work for you.
To answer my own question, if you're using a browser that supports the flexible box layout model, setting the left and right DIVs to "-webkit-box-flex: 0;" and the center DIV to "-webkit-box-flex: 1;" does exactly what I want. The container should have "display: -webkit-box;"