See example,
I am trying to use flexbox without adding lots of extra div wrappers.
In this example, I would like the button to be on row 3.
And I would like the item 3 to stick within 50% of the width.
Is it possible to achieve what a I want without adding extra divs or emptry items?
How to proceed if extra divs are reuquired?
Thank you in advance.
In crease the width / basis to force a wrap.
You have flex-grow enabled so it will grow, set only basis.
Many thanks.
Why is max-height preferable to height? Do you wantto do so that the content defines the sizes and not the container? How does it make it more responsive?
I noticed flexbox has a very nice property align-self. If I wanted the middle element to be aligned in its own way.
I didn’t use max-height, I removed the height altogether. But I did swap width for max-width so it will work on screens smaller than 400px.
Yes, that is exactly the reason I removed the fixed height.
As the screen narrows, in-line flow content will wrap to new lines making the content get longer (in height), a fixed height may not be able to contain it causing overflow issues.
Also some user like to increase their browser’s default font size, this can cause problems if your layout is not responsive or flexible to accommodate this.
So generally I won’t use fixed heights for content containers. If you want extra white-space in the container you can add that with margins or padding instead.
Align-self refers to the cross axis (top to bottom in the above example) and will have no effect if applied as there is no free space to be counted vertically.
If you wanted to move the third item to the horizontal center then you could just use margin:auto on it. (If you want it to the right use margin:left:auto)
OK 
I only met absolute margins so far. Good to know.
I am quite amazed that flexbox is linear, but can be used in 2d with wrap.
Why would felxbox be more suited than using a CSS grid defining each row as a row?
If I want very small buttons and not ones that take 50%, it seems to me that I need an extra div that will be large enough to force a wrap on row 2 and that will contain the buttons on the row 3, Is there a solution without an extra div? I have read in a book that one should avoid adding too many diffs for fixing the layout.
how to make the button have the height and width I want only with padding? With padding: 0, the button already has a height of 100px that I did not want. I mean that the height of the button has its height extended by the padding from the
.
How do you define “too many”?
I say “to many” is more divs that you actually need. If you do need the divs, that that’s fine.
I get what the book means by that and agree to an extent. Something you often see with html from some CMS and popular frameworks have what I call “Russian Doll Divs” where there is div after div after div nested several deep before you get to the content, I really dislike that, it seems so excessive and bloaty to me.
But there are always situations where you do need an extra container to get the desired layout, and I say don’t sweat it. If you need it, add it, it won’t hurt. Only get concerned if you start seeing the Russian doll effect too much.
I’m not sure what you mean. Can you explain better?
In the example here:
The buttons have automatically a large height without defining anything. I can enlarge buttons with padding. But I cannot shrine buttons. I want smaller buttons that what is shown.
That is because the default setting for align-items is stretch which stretches them to fill the row height.
Change the align-items to the setting you want.
OK for the container. For a button, should dimensions be set by using padding or by using width and height? WIth box-sizing render-box, padding is part of the element.
BUt a padding of 100px in the container will behave as a fixed size of 100px using width of height. It will have the same overflow issues on small windows. Are you using "“non-absolute” values in the padding?
This is always the problem with these theoretical layout experiments which I see over and over again.
People have a habit of beginning to design a layout without any content, then think they can add the content to it once the layout is complete.
But the problem with this approach is always that one of the main principles of fluid, responsive design is that the content is a key factor in shaping the layout, content should define the volume of its container.
So when people start designing without content, empty containers have no volume by default, so people then start adding height and width values to create volume and get the look they want. But when they finally come to adding their content, the game changes entirely and that layout which is likely based on magic numbers falls apart.
So the correct approach is to add content at the very start, then devise a way to best present that content on the page. If you don’t yet know exactly what the content will be, fill it with lorem ipsum and placeholder images. Then you can construct a layout around the content knowing this represents a real world page with actual content, rather than imagined magic numbers creating volume for the elements.
For example, in the earlier pen you added a fixed height to the container, presumably to make it the height you expect it to be when filled with content, as with only “item#” in each block it would appear quite squat. If however the intended content should be a more lengthy paragraph of a whole sentence or multiple sentences, that is what you should add, be it the real content or a realistic sized snippet of lorem ipsum.
tl;dr
So the case in point are the buttons, which currently have no content, they are empty. Without knowing what content they will eventually have I can’t recommend the best way to size them. But as a general rule, if it is text, let that content define the size, with padding to suit your taste. But for images like icons, it is OK to define fixed dimensions for small elements like this.
An absolute dimension on a container breaks this principle because the style of the container becomes location dependent. Containers are rarely alone, and absolute dimensions would depend on the location relative to other things.
It is like in physics, there are principles, concervation of energy, etc.
If you have a component using float:left that must have a fixed number of pixels, and that will overflow if the window is small. To align a pane to the right with the bottom of this float container on the left, an absolute height value seems to me quite practical. Maybe a refactoring could remove the absolute value. But it solves the problem good and fast enough.
In summary., there are 2 divs, both inside a top container div with overflow: auto.
the left div has float:left
the right div is aligned to the bottom with the left div using an absolute value.
The absolute value keeps the right div within the visible area. But when you scroll, you can see that the right div expands to the bottom of the left div due to the float: left.
It is hard without a codepen example. Sorry. Too much sass to add.
Here is the component, called “vertical tabs” at the bottom of that link. YOU can see the component running in the browser with non runnable sass in “show code”.
.vertical-tab-content-container {
@include size(80%, $vertical-tabs-height);
}
/* will generate: */
.vertical-tab-content-container {
width: 80%;
height: $vertical-tabs-height;
}
- For the other topic, I mentioned a button because it is not really a container. We can consider it as a container and use padding. But then it seems to me that we are obliged to use box-sizing: render-box. Besides, padding may be used to do some small animation effects when on :hover.Immediately you make a dependency between 2 separate items -this is not good coding practice. If you (or a co-worker) changes one item without changing the other the layout breaks. This is not how you code a site for ease of maintenance. It should be that when you change one item the other is automatically at the point it needs to be. Sometimes a quick fix turns into a long-standing pain in the neck.:). We are all guilty of it at times but you always need to say “what if”?
This is done by coding it correctly in the first place and using the correct techniques so that changes to one element do not force you to change other elements at the same time.
I just posted this link in another topic but is worth a read especially the section on magic numbers.
Interesting link.
Hi guys
I’ve been practicing flexbox and this is my result for what he wanted no extra divs and is responsive change the min-width to whatever you need not perfect but it does the deed the styling and border s are just for show to show the box size feel free to remove that
css:
*{
box-sizing:border-box;
}
.top-container{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
max-width:900px;
margin:20px auto;
border:#555 solid 1px;
}
p{
text-align:center;
padding:10px;
}
.half{
border:#111 solid 1px;
width:50%;
min-width:250px;
}
.full{
border:#f00 solid 1px;
width:100%;
min-width:250px;
}
button{
padding:10px 50px;
box-shadow:1px 1px 7px #333;
margin-bottom:10px;
}
html:
<div class="top-container">
<p class="half">item1</p>
<p class="half">item2</p>
<p class="full">item3</p>
<button></button>
</div>
naturally i used global tags but ever add more and don’t want to edit just add classes to change it differently
It seems equivalent to the solution with flex-basis: 50%. I think flex-basis is better than width: 50%;
It is still not what I want since I don’t want a <p> with a larger width than the other.
In my final solution. I added 2 extra divs: one top container, and one container for the button. The display: block of a div will make things be on separate rows.
I think the cleanest solution to avoid an extra div would be to have a margin-right on the <p> that needs to have a row on its own. Flex is linear and can be split into rows. But content must be filled in.
I realized that the vertical-tabs component I mentioned and linked can easily be remade without absolute distance values or float: left, by the use of flexbox. The right pane just needs flex-grow: 1 instead of width:80%. I do not have time to copy the code but it works.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.