The resulting size is called their flex-basis (which can also be set explicitly with a property of the same name). Flex items first get sized following the normal rules width, content, etc. If you aren’t, probably what’s happening is the element is “flex-shrinking”. The first thing you can do is check if you’re specifying its width, as in the previous section. If one of your flex items has overflowing content, things get a little more complicated. CSS is like an assistant: you want to guide it, not dictate its every move. Was it getting so wide that a whole paragraph fit on one line and was hard to read? Set max-width, so it won’t go beyond a certain limit, but also won’t extend beyond the edge of the screen on small devices. Was this element disappearing entirely when it lacked content because it shrunk to a width of 0? Set min-width, so that it has dimension but still has room to grow. More often than not, if you set an element’s width, and you set it in pixels, you really meant to set either min-width or max-width. But if you run into a variation on this situation, it’s worth considering whether you really need to be controlling the width, or whether it can be left up to the page to determine. This isn’t inherently bad, especially since there is no fixed height, which in most cases would cause the content to simply expand downwards. But the thing they all have in common, is that the width is being determined by something other than its content. There are many possible ways the container element might have been forced to not grow. Or, the content could be a block-level element, whose width or min-width is set to be greater than the container’s width. If word-wrap were set to nowrap, the text wouldn’t even wrap in-between words. But there are other kinds of content that might be overflowing. In this case, the only way to make the content more responsive was to enable word breaking. See the Pen CSS is Awesome: word-break by Brandon ( on CodePen. Setting it to break-all will instruct the browser to break up words if necessary to wrap text content within its container. To get a continuous word to wrap, we have to use the CSS property word-break. Perhaps, for instance, the text is a blown-up header on a site that’s being viewed on an especially small phone. But let’s assume for a moment that we absolutely cannot afford to change the container’s size. By default, text wraps at white space and doesn’t break up words. This is little bit unfair to the box’s content because the word AWESOME can’t fit on one line at the given font size and container width. In real-world scenarios, the second condition is most likely the thing that needs to be fixed, but we’ll explore all three.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |