Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Is it safe/acceptable when using flex containers to also use margin-top(bottom, left, right) and padding to shift a little space either, in between elements or to the left/right? Or is it better to use the flex-basis in combination with defined widths?
I think a better way to put your question is
Is margin & padding a "flex-way" to arrange elements inside a flex container? - Still doesn't make much sense but I guess the answer should explain why.
Answer
Flexbox(flexible box) is a layout concept & just provides a more efficient way to lay out & distribute space among its elements inside a flex container & gives you extra power to control your elements with unique properties like order, flex-grow, flex-shrink etc. - Very similar to what a grid layout does. Now you wouldn't ask a question like - "Can you use grid frameworks like Bootstrap along with margin/padding?" would you?
A simple answer to your question - Ofcourse you can, it all depends on your requirements. Its subjective not wrong/right to use them with flex. So yes, you definitely can use margin/padding in conjuncture with Flexbox and if your requirements demands it(which most of the time is the case) or you could just go complete "flex-way" using flex-basis(similar to width) etc. Sometimes when these won't suffice you will have to use padding/margin which again is very much safe/acceptable(I don't know what that means here though - however you take it).
Just need to understand that when you have defined a container as flex you cannot use few block properties like text-align etc.
Hope you got the right perspective.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
This might be a weird question but on youtube in guides I always see people using flex and grid.
I've started learning them but prior to that I was using block and inline-block exclusively.
So do people use flex and grid only?
And also is flex different from flexbox because vs code displays them as 2 different options.
Well, I generally use display: block when a element with display: none has to be made visible.
Also, paragraphs and spans are inline elements. I find it quite difficult to work with inline elements, so whenever I style them, I generally make them block elements (may be not if they are children of a grid).
But in case of containers, yes I normally use display: grid. And they are generally have default display value of block, so why change it to block again?
As far as flex and flexbox go, I don't know much about flexbox. But as far as I know, flex is the improved version of display: box and display: flexbox.
If you are planning to code css for others to see such as in a professional context, the safe bet is most often flex or grid, but they all have their uses in different contexts. My suggestion to you would be to go into the inspector on some of your favorite websites and see what they use. It you like one way better than the other or find one way more understandable, then use that one, otherwise, just use both.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I've just stumbled upon this term/method of coding while learning CSS and from what I can understand the "content wrapper" is just a way to center align content of an html element within a container (specifically using a div element). I am not certain on the believability of this information, and would like someone to help further justify this please!
I believe the term is not standardized in any way and it is mainly about semantics. In general it is being used for elements containing some information or grouping several pieces of content together.
For me it is almost the same like container, just more related to the content. So it can be for example the central part of page (between header or footer) or the column with the article.
To simply say, content wrapper holds all visual elements and content on the page. Yes, it centers the content inside the <div> element which is conventionally used when using a content wrapper, but it's also opinionated.
This is normally achieved by using margins, and the most common way of using a content wrapper; eg:
.wrapper {
margin-right: auto;
margin-left: auto;
max-width: 960px;
// Or set a padding inside of the wrapper
padding-right: 10px;
padding-left: 10px;
}
Additionally, wrappers are also used for things like applying a sticky footer.
Otherwise, as for the difference between a container which may usually inherit the same properties, usually intends another kind of containment. One that sometimes necessary to implement a behavior or styling of multiple components.
It serves the purpose of grouping elements both semantically and visually.
The terms wrapper and container can also mean the same thing depending on the developer and what they intend. Just remember to use them in the right way.
Your wrapper can take any name you wish since you decide the css selector name. The styles you apply to that selector makes the change. Either center align or left or etc. It is just a convention that developers use. You will get used to the terminology in no time. Or build your own glossary.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
Well, as the title says: is it consider as bad practice to use empty divs to style the page? of course if it's performance wise(instead of using images for example).
And second question is: is there any difference between div(as block element) and span(as block element) in any term of performance or anything else?
Thanks.
To answer your first question bluntly, yes. If you are resorting to using empty divs to style a page, you need to learn more about the features that CSS provides. Given enough thought, you should be able to set up appropriate margins, or line-heights to make that happen. Or start working on a flexbox layout.
And for your second question, all elements are basically the same. But we appropriate different semantics to provide meaning. Quoted from SO: What is the difference between HTML tags <div> and <span>?:
But in modern HTML all elements are supposed to have meanings: a <p> is a paragraph, an <li> is a list item, etc., and we're supposed to use the right tag for the right purpose -- not like in the old days when we indented using <blockquote> whether the content was a quote or not.
So, what do you do when there is no meaning to the thing you're trying to do? There's no meaning to a 400px-wide column, is there? You just want your column of text to be 400px wide because that suits your design.
For this reason, they added two more elements to HTML: the generic, or meaningless elements <div> and <span>, because otherwise, people would go back to abusing the elements which do have meanings.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am trying to create a twitter grid, I have some grid spans that have a larger height then others and on each row of the grid the spans are pushed down. What I would like to do is have the items to appear under the over items. I have taken a screen shot of what it looks like and I have photoshopped how i would like it. Screenshots below.
Here is the original
Here is the photoshoped
There are 3 overall approaches to Bootstrap grid alignment / height issues..
A CSS only approach like this this..
http://bootply.com/85737
A 'clearfix' (responsive reset) approach like this this (requires iteration every x columns)..
http://bootply.com/89910
Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
This is a common issue as grid elements have to be in rows so first and last will loose left and right padding respectively.
Workaround I use:
- if there is a set number of grid elements per row then I don't include <div class='row'>, just the gridded elements, and then remove the extra padding with nth-child() property of every third and fourth element (in case there are three gridded elements)
Also you could try using masonry
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
We all now using table for layout is bad thing. But what's about using table-cell? E.g. i need two blocks one is 200px width and other is 100% - 200px (ye, i know about float hack and also about CSS3 calc).
What you are talking about is for display of a table and table cell. The idea about using tables for layout causes issues with the structure of the page. The CSS property does not affect structure hence there is no issue with using that for visual layout.
While you are right with the notion that using tables for layouts bad... that mostly stems from that additional unnecessary markup. td and tr elements do not provide the correct semantically meaning for what you want.
With that said, there is nothing wrong with applying display: table-cell; on divs, its just another way of structuring layout.
(In fact, table-cell provides one of the few ways to vertically center a div with variable height).
It's an ugly hack, but I don't think there's any problem with it.
The table is discouraged for design because it should hold tabular data - it's semantically wrong to put eg. menu and article in table cells.