Since the new Bootstrap 4 is migrating from using 'floating' elements to the better 'flexbox' method, just wondering is it ok to construct the entire grid structure using .d-flex rather than the existing .container .row .col way?
Since both of them are fundamentally constructed using flexbox I don't see any downside of replacing one with another. In fact I feel that .d-flex requires less css class name and make things more readable within the html.
There are other reasons why I prefer d-flex than the old col:
Horizontal and vertical elements - d-flex supports creating elements both horizontally (.flex-row) and vertically (.flex-column). Col only support horizontally.
Inline element - The element's width will inherit from the child and can be align dynamically using d-inline-flex. Whereas col grid is fix.
Advance re-ordering - d-flex uses .order-x and col uses .push and .pull. In my opinion, d-flex is more intuitive, the order of elements are represented through numbering and on the other hand the number in .col is how many grids are being push and pull away from the previous state. It gets messy when you are building a more complex site....
Please correct me if I'm wrong.
Bootstrap 4 beta just got out and the whole grid system is using flexbox from now on.
You can now achieve a whole grid with only flex and it has reduced the number of classes you need. The main advantage of the Bootstrap Grid System is that you have paddings around your columns and negative margins on the .row wrapper. That way, when the columns wrap (e.g. on smaller screens), they will stay correctly aligned.
To answer your 3 points:
Horizontal and vertical elements
Just use the regular .row class to achieve a flexbox grid. You can even add .flex-column (even with breakpoints, like .flex-{breakpoint}-column). Know that the .row class has the flex-wrap: wrap property.
Inline element
The column width is not necessarily fixed:
you can use .col-auto to set width: auto on your column
you can use the unit-less .col class to make the column use the available space
you can align them with all the flex utilities Bootstrap provides
you can mix column sizes (some fixed and some dynamic): e.g. .col-md-auto followed by .col.col-lg-2
Advance re-ordering
.col-push/pull-{breakpoint} has been replaced by .order-{breakpoint}.
you can use the margin utilities (e.g. m-{breakpoint}-auto) to replace .col-offset-{breakpoint}
Related
I know that it is far more comfortable to use flexbox instead of old concepts like
display: inline;
float: right
But when you compare using flexbox just by putting a container and using display: flex; instead of just changing every element inside the container to display: inline;, what are the advantaged of using flexbox? I mean apart from using things like direction, wrap, justify-content etc.
So when I give an example like
Can I also achieve those properties (one item horizontally put after another within the container, together fitting the total container size) by using display:inline and float: right?
I know that this is ineffective. But I am searching for arguments why flexbox is a good alternative to the old inline/float-approach, even if you only use flexbox's main abilities.
...arguments why flexbox is a good alternative to the old inline/float-approach...
Why Flexbox?
For a long time, the only reliable cross-browser compatible tools
available for creating CSS layouts were features like floats and
positioning. These work, but in some ways they're also limiting and
frustrating.
The following simple layout designs are either difficult or impossible
to achieve with such tools in any kind of convenient, flexible way:
Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is
available.
Making all columns in a multiple-column layout adopt the same height even if they contain a different amount of content.
MDN flexbox
I want to seperate my divs into something like the image below using flexbox but i'm not sure how to do it. Do I need to use absolute positions for it or does flexbox have a way to approach it without too much issue?
What you have described is definitely possible. I have provided a rough outline of how it can be achieved below. This link should fill in the blanks for you. Essentially you need a container which has the display: flex and flex-direction: row attributes. Then the children inside the container will need the flex-direction and flex-grow attributes set appropriately.
You should also check this site to see if flexbox is supported by the browsers you are targeting.
edit You will also have to set the order property if you want to reorder the HTML elements - thanks to #BugsArePeopleToo who brought this up in a comment.
If you use flexbox for this layout, you'll need a few extra wrapper divs: one to contain all five divs, one to contain divs 1 & 4, and one to contain divs 2 & 5. It may also be worth it to try CSS grid, which is built for this kind of thing without wrapper divs.
This question already has answers here:
Bootstrap Grid, do I need a container?
(4 answers)
About Bootstrap Grid system
(3 answers)
Closed 3 years ago.
I was watching this video and the instructor said that bootstrap requires us to use a container/container fluid when using the grid system. However, she failed to always use a container even when she used the grid system. If you have 1 row and a bunch of columns that you make responsive, does that mean you are still using the grid system or does there need to be more than 1 row, since thats the case she didnt use a container and i was confused as to why she did not when bootstrap states we should use a container? I am a bit confused as when i should use a container in general and more importantly lets say i do not use a container and just use the grid system, what will end up happening?
You do not explicitly need to use .container or .container-fluid to use Bootstrap, but you should. The .container class gives you a fixed-width container, and the .container-fluid class gives you a full-width container which spans the entire width of the viewport. The only real rules that these two classes actually apply to your elements are padding-left: 15px and padding-right: 15px. These are put in place to counter the margin-left: -15px and margin-right: -15px that are generated by .row.
If you don't use .container / .container-fluid, then your rows will all be 'offset' a bit into the edges of the page. Of course, you can easily add in custom rules to get around this, and you may even find this to be advantageous in terms of crafting your desired layout.
It is considered 'best practice' to use the combination of .container > .row, along with .col-X children of .row to represent columns. These columns can occupy any amount of space, and there can be any number of columns, so long as they total 12. For example, [ .col-12 ] or [ .col-4, .col-4, .col-4] or [ .col-9, .col-3 ].
Also, do not get confused between this 'grid-like' layout of Bootstrap and the CSS Grid, which is a completely different 'framework', and something that your instructor may have mentioned around the same time.
For Bootstrap 3 & 4, the .row class, which you use for the grid system, uses negative horizontal margins. The .container and .container-fluid uses horizontal padding to balance out the negative margins.
If you do not use the container system, you will encounter horizontal scrollbars sometimes at different responsive breakpoints. This is usually contextual on the parent object and it's margin/padding values.
You can use the grid system without the container, but it's good practice if you want to utilize Bootstrap as its intended or you might encounter unwanted scrollbars.
It is wildly highlighted that Flexbox is for 1-D and Grid for 2-D but I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox. The closest I came to is
But you could also argue that purely 1D layout like this is more
powerful in Flexbox, because Flexbox allows us to move those elements
around easier (e.g. move them all to one side or another, change their
order, space them out evenly, etc).
I use Grid and Flexbox for basic layout: a general placement of the boxes on the page and some dynamic ones, usually stacked. The esthetical ones (toasters, modals, ...) are managed through a framework. I have not yet found a case where Grid could not replace Flexbox out of the box (that is without advanced CSS gymnastics or a lot of code).
To take the example of the quote above, all the "moves" mentioned are directly available in Grid, usually with the same semantics as in Flexbox.
What are the fundamental areas covered by Flexbox which are difficult or impossible to manage with Grid?
EDIT: the browser support is not important (I only use evergreen browsers and can switch if needed)
Advantage Flexbox
Here are 13 areas where flexbox comes out ahead of Grid (Level 1):
Centering wrapped items. Imagine five elements. Only four per row. The fifth one wraps. In a flex container, that fifth one can be easily aligned across the entire row with justify-content. Try centering this fifth item in a grid container. Not a simple matter.
Aligning grid items across the entire row/column (like flex items can)
How to center elements on the last row in CSS Grid?
How to offset a grid item, also shifting its siblings?
Can I have a varying number of columns per row in a CSS grid?
Wrapping. Flex items of variable lengths have no problem wrapping. Try getting grid items of variable lengths to wrap. Not possible.
How to get grid items of different lengths to wrap?
Can grid items wrap?
Auto margins. Flex items can be placed, packed and spaced away throughout their container with auto margins. Grid items, however, are confined to their tracks, greatly diminishing the utility of auto margins.
Can auto margins work in CSS Grid like they do in Flexbox?
Min, Max, Default – all in one. Setting the min-width, max-width and default width of a flex item is easy. How can all three lengths be set on a grid column or row? They can't.
Setting the minimum, maximum and default length of a grid column / row
Set minimum and maximum widths to grid column using percentages (related, but not exactly the same problem)
Sticky footer / header. It's just so much simpler and easier to pin a footer or header with flexbox.
How can I have a sticky footer with my CSS Grid layout?
Consuming remaining space. A flex item can consume remaining space with flex-grow. Grid items have no such function.
Aligning grid items across the entire row/column (like flex items can)
Make grid item use remaining space like flex item with flex-grow: 1
How to make the items in the last row consume remaining space in CSS Grid?
How to make CSS Grid last row to take up remaining space
Hiding a left column in CSS Grid
How to get the effect of grid layout's grid-template-columns with a variable number of columns?
CSS fr / fractional units minimum too large
Shrinking. Flex has flex-shrink. Grid has... nothing.
Shrink grid items just like flex items in css
Limiting the column count in a dynamic layout. With flexbox, creating a wrapping two-column grid that remains fixed at two-columns across screen sizes is no problem. In Grid, despite having all these great functions, such repeat(), auto-fill and minmax(), it can't be done.
Make CSS Grid auto-fill only 2 columns
CSS grid - maximum number of columns without media queries
Creating space between first and last items. In a grid container with a variable number of columns, it's not easy to add an empty first and last column. Margins, padding, columns and pseudo elements each have their limitations. It's simple and easy with flexbox.
Add space before and after first and last grid items
An important benefit of the inline-level container is lost in some cases. If you have a Grid layout with a dynamic number of columns – meaning you cannot set the number of columns or a width for the container – then display: inline-grid doesn't work. All items stack in a single column. This is because the default setting on grid-auto-columns is one column. In at least some cases, flexbox fixes the problem.
How to make a grid container shrink to fit the content?
Getting columns with author-defined grid areas to wrap without media queries. Let's say you have a two-column grid containing grid areas that have set locations, and want the grid to automatically transition to a single column (with the second column wrapping below the first) on smaller screens. With grid, you would need a media query. The auto-fill and auto-fit functions will not work because the locations of grid areas have been specified. If you want to avoid a media query, flexbox's flex-wrap function may be useful.
Two-Column grid should wrap into One-Column grid
There is no column-reverse function in CSS Grid. Getting items to populate a container starting from the bottom isn't possible with a single rule applied to the grid container. With flexbox, however, the task is simple with flex-direction: column-reverse.
Filling cells starting from the bottom in CSS Grid
https://stackoverflow.com/q/67620185/3597276
The resize property on a grid item has no effect on the track. Unless a column or row track is set to auto (content-based sizing), resizing a grid item will overflow the track. Since flexbox doesn't have column and row tracks, it may be a useful alternative.
Resize property on grid items results in overlap of other grid items
Flexbox and CSS grid are two different features and I don't agree about saying that one can replace another or that CSS grid is a superset of flexbox.
You said:
I have not found a clear explanation why Grid could not be used for 1-D and replace Flexbox.
Here is a basic flexbox example that involve wrapping that you cannot achieve (or probably difficult to achieve) using CSS grid. Reduce the window size and see how the elements will behave.
.box {
display: flex;
flex-wrap: wrap;
}
.box>span {
border: 1px solid;
padding: 10px;
flex-grow: 1;
}
<div class="box">
<span>some text very long here some text very long here </span>
<span>text here</span>
<span>A</span>
<span>B</span>
</div>
This is a 1-D layout where each line may have elements resized differently depending on the free space without being inside a 2-D grid. It will be difficult to achieve the same output using CSS-grid.
Basically flexbox is more suited when it comes to multiline/multirow content following one direction whereas CSS grid is more about a Grid with row and columns. Of course, when it comes to only one line a 2D grid can be considerd as 1D thus flexbox and CSS grid may achieve the same thing.
It's like comparing a table with only one tr and multiple td with a set of inline-block element inside one line BUT when it comes to wrapping and multiple tr it's clear that table and inline-block are different.
Worth to note that you can achieve what you want using any techniques in general. In the past, Flexbox wasn't there and developers were able to build layout using float (Boostrap is the best example). Then flexbox come with more powerful features to make things easier. Same thing for CSS grid and for future features.
Here is an example : https://drafts.csswg.org/css-align-3/
This Draft is talking about a future enhancement of alignment where we can consider jutify-content, align-items, etc without even using flexbox or CSS grid but directly on block elements.
If implemented, will this make Flexbox and CSS Grid useless? I don't think so.
I should probably point out that CSS Grid is MUCH newer than CSS Flexbox and therefore may actually be intended as a replacement to some extent. Much like Flexbox replaced the typical use case for float (not the intended use).
I'm going to preface this by saying, I rarely NEED the complexities/capabilities of Grid so I still use Flexbox for most things.
However, in my experience, the flex-wrap capabilities, especially with variable screen sizes, is one place that I feel Grid isn't a great replacement.
As a reminder: Flexbox vs Grid IS NOT an all-or-nothing question. You can, and sometimes should, use grids inside flexboxes or even add tables to grids or floats to tables. The driving factor should be to use the right tool for the job NOT to simply discard everything else in favor of the newest option.
I have used the bootstrap framework to create a responsive site, however I have not used the bootstrap .container class.
For my project, all the content sits withing a div with a class of .wrapper. The wrapper is fluid and has a width of 80%, max with 1200px and min width 360px.
Within the wrapper I have used the standard .row and .col Boostrap classes.
I have tested the site and everything works as expected. The site validates and (even works on ie-9) and mobile devices.
Is it OK to use the above method without the .container class?
Many thanks,
p
There's no reason that you must use container elements. However, the .container-fluid class does almost exactly what you describe. I'd consider switching your custom wrapper to that for standardization and ease of maintenance.
Regarding your row margins--that's not a great idea. You may find yourself wanting to do a modern "flat" design where you'll want some of your rows stacked tightly. It's usually better to leave grid elements alone, and apply margins and padding to inner elements. You could put a class on the row to do so:
.row.padded > div div { /* > div should be a column */
margin: 1em 0;
}
<div class="container-fluid">
<div class="row padded">
<div class="col-xs-12">
<div> ... </div> <!-- this will have a margin -->
If you don't use rows, you are fine. Rows go to negative margins without container.
edit: Anyway, if you use bootstrap3, you should be fine even with rows...
Bootstrap is a big set of classes that are meant to be useful; however, by no means are you forced to use them. If you want something more customized than the default Bootstrap classes, then using your own class is totally fine.