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.
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
Is that possible to wrap div inside a row? I know it's possible but I just want to know it's a bad practice or not. I'm not using any col-md classes inside row.
Please see the example below..
<div class="row">
<div class="home-bg">
1
</div>
</div>
It's a bad practice because .row is only meant to contain grid col* as specifically stated in the Bootstrap docs...
Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them. This padding
is then counteracted on the rows with negative margins.. In a grid
layout, content must be placed within columns and only columns may be
immediate children of rows.
http://getbootstrap.com/docs/4.1/layout/grid/#how-it-works
Your question is the same as asking can I have a div wrapping another div? The class row is just a bootstrap class with some css rules. Nothing more nothing less.
You will need to do this so many times. You will mix divs with classes from different libraries, with custom classes that you will have created and with so many different types of elements.
There isn't a question of good practice or bad practice. If you need some bootstrap functionality that already exists from a class, it's a good practice to use the existing functionality. If not then do whatever you want.
You can do this, but the question is why do you want to? All the row class does is add negative margins and the necessary flex properties to allow the column grid to work, seeing as you don't need the column grid, do you need the negative margins? If not then don't add the rowclass. Having a non-column grid class as the child of row isn't going to break your site, but it's important to bare in mind it may cause some undesired design bugs due to the negative margins it adds.
You can learn more about the Bootstrap column grids here.
I have quite an interesting problem in front of me. I think it would be better to illustrate it in codepen:
https://codepen.io/BooleT/pen/bWdPWe/
In the class names ib means "inline-block" and iib means "inner inline block".
I have created figures to illustrate what I am trying to achieve. In the next 3 paragraphs I will reference the images in this album:
https://imgur.com/a/9CFAm
So there are three inline blocks, one of which is actually a container of three other inline-blocks:
The effect I want to achieve is to make the contents of the container to wrap into 2 lines when I resize the window:
But instead I only manage to wrap the whole container itself to the second line:
Is there actually the way to achieve what I want? I've tried to add nbsp between outer inline-blocks and to add white-space: nowrap to the body element (and overwrite it to white-space: normal for the container), but none of it worked.
I know that I can work around it by adding media-queries or js that simply reduces the width (or max-width) of the container when I reduce the screen width, but it doesn't seem like the solution. I don't even know the width of every block in my real layout.
I will try to keep an open mind, since the solution to this problem might require to change the entire layout of the page, but I do think there is one.
Being not a fan of flexboxes – the burden of old-browser compatibility still standing strong where I come from – here's what we do to make a container on the right occupy all the remaining horizontal space:
Codepen
The fixed-size divs on the left are told to be float: left.
The spanning div on the right is given display: block.
The smallest inner divs are display: inline-block.
If you can use flexbox then this pen: http://codepen.io/anon/pen/RVWwEP seems like it does what you want. Be aware of the compatibility caveats that go along with flexbox, though.
For convenience I've put display: flex; on the body to create top level row, although #10nikov's answer is definitely a better way to do that.
I have a lot of divs with different size and width. I would like to automatically place them inside another div and position them like:
Anyone know what css properties should I use? I tried with floating + display (several combinations) and nothing works for me correctly - I had divs in one line -> a lot of space (because one big element) -> next line -> and so on... and so on...
Without using Flexbox you will find it hard to acheive this layout.
Flexbox layout example
You could use a JS plugin such as Masonry which will enable you to acheive the layout.
If I understand correctly, what you want to do is place them in a container that has a set size (and probably expanding height according to its content) and then line them up the way you show. The easiest way I can think of is using Twitter Bootstrap. It has a container class and then you can align your elements within divs and it will also make it automatically responsive.
Tip: Avoid using position: absolute and height: wherever you can because it messes with the flow of your site.
don't forget to clear your floating elements when needed.
When you set a button element to display:block it dominates its vertical space like a block while still calculating its size based on its contents like an inline-block. This seems like a really useful behavior. Is it possible to make other elements behave this way?
Example
I can accomplish a similar method of display using floats and clears, but it causes havoc on nearby content that isn't tailored to it.
I can accomplish it more sanely by wrapping each element and making the outer element display:block while the inner element is display:inline-block. This requires extra markup though.
Sounds like you want display: table.
Such a “table” shrinks to just fit its content, and if the content is not a display: table-row or display: table-cell then it is just treated as if it were inside a single-cell table. You can also center it horizontally using auto margins.
I changed block to table in your example and it did exactly what I think you want.
(If you've thinking about the advice “don't use tables for layout” — that is referring to using tables written in HTML markup, not any CSS facilities.)