I'm trying to do a responsive design for a menu, you can see the code here.
As you can see flex works pretty well for that design. My only concern is that it won't be compatible with older browsers. Is there an easy way of implementing this without flex, I have tried having only divs inside a container here
The problem is I don't know how to make the My log box appear beside the New log box.
I want to keep responsiveness (boxes stacking up vertically in smaller screens).
Here is the code:
HTML:
<div class="block-menu vertical">
<div class="menu-item">My organizations</div>
<div class="block-menu horizontal">
<div class="block-menu vertical">
<div class="menu-item">
ITPs
</div>
<div class="menu-item">
My log
</div>
</div>
<div class="menu-item">
New log
</div>
</div>
<div class="menu-item">
Profile
</div>
</div>
</div>
CSS:
div.block-menu.horizontal {
display: flex;
width: 100%;
flex-wrap: wrap;
}
div.block-menu.horizontal > div {
flex-grow: 1;
}
div.block-menu.vertical {
display: flex;
flex-direction: column;
}
div.block-menu.vertical > div.menu-item {
width: auto;
}
.menu-container div.menu-item {
padding: 20px;
margin: 10px;
background-color: red;
flex-grow: 1;
}
If you add one extra div (like it is in the flex example), it is kind of simple playing with the values for float and width, you can see an example here: http://jsfiddle.net/ggb2ecu7/3/
Although that one doesn't take into account the margin that you have in the flex example. To fix that, you could use calc, like this: http://jsfiddle.net/ggb2ecu7/4/ (sorry about the extra unnecessary CSS rules). E.g.:
.w2 {
width: calc(100% - 20px);
}
[20px because the margin I set was 10px (on both sides = 20px)]
The problem with calc is that it may not work with all the older versions. You can check the support for calc in here: http://caniuse.com/#feat=calc
Related
I think this gif explains it very well:
https://gfycat.com/FormalReasonableHagfish
Context: I'm working on a digital catalog (I didn't start the project) for a company that sells TONS of products, sometimes they are small, sometimes big, sometimes wide, etc. They go on a specific area, lets say 400px x 400px.
I did horizontal alignment with flexbox and it works very well but on the vertical axis the products have static values (prod_1 top: 0px, prod_2: top 10px, prod_3 top: 20px...)
EDIT: My question/need is: I want to be able to align (responsively in the horizontal and vertical axis) 1 to 6 images inside 1 div but flexbox only let me choose one axis (flex-direction row or column), what can I do?
The code is something like this:
<div class='container'>
<img class='item_0'>
<img class='item_1'>
<img class='item_2'>
<img class='item_3'>
<img class='item_4'>
</div>
If posible the solution should be in CSS, if it can't be done, then it could be in Javascript or maybe changing a little bit the HTML.
This is because I only have access to CSS and JS. The index.html is generated automatically from a database by an application developed/controlled by another team and it's not that easy/quick to ask them for changes.
The best way I thought is with javascript but it may not be that easy, considering it's a big project and there's A LOT of code already written (not by me).
What do you guys think? I don't need the complete solution but some direction would be really appreciated, thank you!
Ok, so I am not 100% sure about what you need, but here's some code I made that does pretty much what your gif showed. You should be able to tweak it to your liking.
https://codepen.io/AlexWulkan/pen/wmmPvL
HTML:
<div class="container">
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
</div>
CSS:
/* Outer container */
.container {
display: flex;
flex-direction: column;
background-color: #eee;
height: 400px;
width: 400px;
}
/* Each row of boxes */
.row {
display: flex;
align-items: center;
flex: 1;
padding: 0 1rem;
}
/* determines the position of the boxes in each row */
.row:first-child {
justify-content: flex-end;
}
.row:nth-child(2) {
justify-content: center;
}
.row:last-child {
justify-content: flex-start;
}
/* Each box */
.box {
background-color: #666;
height: 100px;
width: 100px;
}
Tell me if there's anything you have questions about and I'll try to answer. The code should be quite self-explanatory though. :)
My sidebar is getting pushed down instead of staying inline with my main class, you can view the issue more in my fiddle. (This is one of the first times I've not used bootstrap for a project in a very long time).
view my fiddle.
Instead of float, using flex is a better approach for responsive design.
Try putting your sidebar and main inside a div with display as flex and flex-wrap as wrap.
Here's an example-
.flexbox {
display: flex;
flex-wrap: wrap;
}
.latest-single {
width: 70%;
background-color: blue;
}
.sidebar {
width: 30%;
background-color: green;
}
<div class="flexbox">
<div class="latest-single">
This is our primary content
</div>
<div class="sidebar">
This is our sidebar content
</div>
</div>
You have to choose a way of how to display them. (block,flex,table)
i made it working by adding the display:flex on .container class.
jsfiddle https://jsfiddle.net/31rjm8qb/7/
You have a couple of problems here.
.main has width 100% so .sidebar can not fit
.sidebar is floated while .main is not, so they will not line up
I think it would be a good idea to try out display: flexbox and remove floats altogether.
Check out the following article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I have some DIVs on a page. How can I make the DIVs create a new column on the right when the bottom of the page is reached. So I have some small fixed height DIVs with images inside them. After every DIV, there is a line and then the next div and so on. On smaller displays, the screen requires scrolling to see the DIVs. So I added overflow: hidden to the body, to disable the scrolling. Now the DIVs at the very bottom are cut out, so I want the DIVs that are cut out, to create a new column to the right.
Example: .
body {
overflow: hidden;}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
There's a lot of solutions to this and all run into polyfill issues. Columns are notorious for this.
A good option with decent coverage is to use flexboxes. Flexboxes were pretty much made for this kind of stuff.
Wrap all the divs in another div (i used section) and give the wrapping container some flexbox rules:
body {
overflow: hidden;}
.wrap {
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 100vh; /*the height will need to be customized*/
width: 50px;
}
#icon {
background: #000;
color:#fff;
height:50px;
width:50px;
margin-left: 10px;
}
<section class="wrap">
<div id=icon>1</div><br>
<div id=icon>2</div><br>
<div id=icon>3</div><br>
<div id=icon>4</div><br>
<div id=icon>5</div><br>
<div id=icon>6</div><br>
<div id=icon>7</div><br>
<div id=icon>8</div><br>
<div id=icon>9</div>
</section>
You'll need to give height and width rules to the wrapper, however. If it's in another container with a set height, you should be able to give it height: 100% and it will reach the bottom of the page.
Word of warning: columns and flexboxes are notorious for having cross-browser compatability issues, though mobile browsers are somewhat better at this. A good solution is to use a library with a focus on responsive or mobile design, like Bootstrap or SpaceBase (though the latter is a SASS library)
#samuel-denty are you looking for CSS Columns ?
here is jsfiddle: https://jsfiddle.net/zk7578vj/
try using class (.) icon instead of id (#) on css, like this:
body {
overflow: hidden;
-webkit-columns: 50px 2;
-moz-columns: 50px 2;
columns: 50px 2;
}
.icon {
background: #000;
color:#fff;
height:50px;
width:50px;
}
<body>
<div class="icon">1</div><br>
<div class="icon">2</div><br>
<div class="icon">3</div><br>
<div class="icon">4</div><br>
<div class="icon">5</div><br>
<div class="icon">6</div><br>
<div class="icon">7</div><br>
<div class="icon">8</div><br>
<div class="icon">9</div>
</body>
I've recently been playing with Flexbox for the first time and, in general, it's absolutely amazing. I've encountered an issue recently however, where I cannot seem to give flex items that are wrapping any vertical spacing.
I've tried using:
align-content: space-between;
but this doesn't seem to do anything. From the reading I've done, this would only seem to work if my flex container is taller than the elements contained within (is this right?) If so, then would I not have to set a height for my flex-container, which would seem to defeat the purpose of using flexbox?
The only way I can think of to make this work would be to give bottom margin to the elements within, but again this seems to defeat the purpose.
Hopefully I'm missing something fairly obvious - here's a link to a codepen: http://codepen.io/lordchancellor/pen/pgMEPz
Also, here's my code:
HTML:
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
CSS:
.flexContainer {
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: space-between;
justify-content: center;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
EDIT - Just going to add a little more detail here, as I'm not sure I'm putting it across well enough.
In my larger project, I have some block level elements that are arranged in a row using flexbox. However, there needs to be some responsiveness as the user may reduce the screen width. At this point, I want my elements to begin to stack (hence the wrap). However, as the elements begin to stack, they are all touching vertically, where I want there to be spacing.
It's beginning to look like top and bottom margins may be the only way to resolve this - however I was wondering if there was a flexbox-centric way to achieve this.
I had a similar issue and I used the following hack to solve the issue.
/* add a negative top-margin to the flex container */
.flexContainer {
/* ... your existing flex container styles here */
margin: -10px 0 0 0;
}
/* add a corresponding positive top margin to all flex items (all direct children of the flex container) */
.flexContainer > * {
margin-top: 10px;
}
For the top row of flex items the negative and positive margins cancel out, for the subsequent rows it adds the margin between the rows (in this case 10px between rows).
It's less than elegant but it gets the job done.
If you force wrapping by applying a width you can then use margins as you normally would without setting a height.
.flexContainer {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
background: pink;
width: 150px;
}
.flexContainer > * {
margin: 1em 0;
}
.flexContainer .flexLabel {
flex-basis: 150px;
flex-shrink: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-sm-12">
<h1>Flexbox Wrapping</h1>
<div class="flexContainer">
<div class="flexLabel">This is a flex label</div>
<a class="btn btn-primary">Button 1</a>
<a class="btn btn-warning">Button 2</a>
<a class="btn btn-success">Button 3</a>
</div>
</div>
</div>
row-gap would solve your problem
.flexbox {
display: flex;
column-gap: 10px;
row-gap: 10px
}
It's because you don't have a height on your flex content for it to calculate the space-between so at the moment, the flex container is as small as possible. Add a height and it should work.
Another hacky solution is to give the item a bottom border:
border-bottom: 10px solid transparent;
I am trying to use flexbox to create a series of rows that scale to fit the available screen space. This seems to be necessary to create a decent UI on a mobile device, as it prevents all the boxes from clustering at the top, and spaces rows evenly. The problem is that it appears to be ignoring the vertical fill on the container, and gathering elements at the top. My code is as below
CSS:
.fill-vertical-space{
display: -webkit-flex;
display: flex;
flex-direction: column;
background-color: green;
height: 100%;
}
.fill-vertical-space > div, .fill-vertical-space > .row{
-webkit-flex: 1;
flex: 1;
background-color: blue;
}
And the HTML:
<div class="fill-vertical-space">
<div class = "row">
<div class="col col-100 section">
...
</div>
</div>
<div class = "row">
<div class="col col-100 section">
...
</div>
</div>
</div>
Note: I have left the content out of the rows. They are typically a mix of heading, nested flex boxes, and drop down menus.
Note 2: I have looked at other answers on the site, but none of them relate to ionic specifically (Could it be possible that Ionics CSS interferes with flex box?).
The problem was down to an ionic class in their CSS file. Adding:
.scroll{
height: 100%;
}
fixed the issue. I also needed an outer container holding the flex module, that was also set to 100% height, and to declare the .fill-vertical-space class as having static positioning.