I'm trying to use flexbox to create dynamic templates where I would mix elements in horizontal and vertical directions without creating wrappers for each group.
I have for example this kind of structure:
<div id="wrapper">
<div id="zone1">
zone1
</div>
<div id="zone2">
zone2
</div>
<div id="zone3">
zone3
</div>
<div id="zone4">
zone4
</div>
<div id="zone5">
zone5
</div>
The wrapper would use display:flex and each children would be set at 100% for mobile screens like this:
My fiddle here: https://jsfiddle.net/laurentw/2myL6h45/2/
Now when the screen goes bigger, I'd like to do this
If I keep the divs as individual divs, I'm running into trouble because I have two different directions:
Fiddle example: https://jsfiddle.net/laurentw/wogmdxL5/4/
And then finally for much bigger screens:
I would like to keep all those divs separated so that I can try out multiple templates without altering the code. I want to influence the order (easy) but I would also like to control the direction and occupied space.
Is that something I can achieve with Flexbox without any additional JS?
Thanks
Related
I got a PSD design where the grid looks like this -
Grid image the image only shows parts of the PSD because I dont own the rights to publish it in public. But as you can see the grid (blue stripes) does not go from side to side as the boostrap-grid. It starts 120px in and finish 120px before the screen (talking about the total 12 columns, not each column)
I am using bootstrap while coding up this PSD, and bootstraps grid goes from one side to the other.
My question: How can I change the bootstrap-grid (center it/add margins) so it looks the same as the grid in the psd i.e starts 120px in on the screen and finish 120px before the screen ends?
I dont need to have any content outside the grid as it is in the PSD. So I would need to rows to go from side to side but the columns to start a bit in, and finish a bit before the screen does. I can not use the bootstrap container instead of container-fluid since it will also take the rows. I can also not use offset since I then will "lose" some of the columns and no longer have 12-column available per row.
My HTML file contains of a standard fluid grid
<div class="container-fluid>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
<div class="row">
<!-- A few columns in different sizes -->
</div>
</div>
Add the following to your css
.row{padding: 0 120px;}
I'm not sure if i totally understand your question, but you can try the following:
Add a container (Bootstrap container)
Add margin with css: .col-sm-4 {margin:Your margin here;}
It really depends on what other content will be inside the rows? If the columns don't need to go from side to side, why not just use Bootstrap .container? You can still have full width content outside of the container..
http://codeply.com/go/HwIDGQpdbO
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
The question is very simple: how to PROPERLY avoid table for layout.
Problems: DIV layout with float:left is not always useful because often at browser stretch all divs pile one over the other...
I have a container div
<div id="container">
<div id="child1"> </div>
<div id="child2"> </div>
<div id="child3"> <div>
</div>
Container 100% page.
child 1, 2 width fixed width ( exampe 300px) and the 3rd width variable width 30%
I whant them not to pile one over the other on browser stretch.
Is it posible ? Thank you
http://thoughtsandideas.wordpress.com/2010/07/15/introduction-to-div-based-layout/
don't use tables for layouts. maybe the link can help you.
You should ALWAYS avoid using <table> for layout. <table> is made to display tabular data. That is it's purpose. If you use it outside of that purpose, then you are using it wrong. Additionally, if you can't achieve the layout you want using float's or display: inline, then you are most likely doing it wrong, or need a little bit of javascript to help you out until the flexbox functionality is fully implemented and supported.
See this post here for further explanation: Why not use tables for layout in HTML?
I currently have the following html:
<div>objA</div>
<div class="tower">objB</div>
<div class="tower">objC</div>
<div class="tower">objD</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>
I'd like to tower(align vertically) the divs in class "tower" so that the following image can be reproduced:
Instead, what I currently have is the following:
http://jsfiddle.net/kAMB5/
Are there any ways in which I could go about achieving my wanted result purely through css? (preferably without changing the html content)
UPDATE: You can assume these are fixed width divs.
You need to put objC and objD divs inside objB div like this: DEMO to achieve desired result:
HTML:
<div>objA</div>
<div>
objB
<div class="tower">objC</div>
<div class="tower">objD</div>
</div>
<div>objE</div>
<div>objF</div>
<div>objG</div>
<div>objH</div>
<div>objI</div>
<div>objJ</div>
You need an extra div wrapping your .tower as in: http://jsfiddle.net/kAMB5/4/
Apart from that, CSS Grid Layout (IE10) or on your .tower CSS3 flexbox (still need a container I guess) could achieve the same result but with lesser compatibility
So I'm writing a program that will need to resize elements based on the viewers screen size. The program is in jsp / sql/ xhtml / css and I have a few questions.
Is there any way to select a css file by saving the screen width to a jsp variable?
Is there a way to align a div below another div and use the above div as a sort of container for it? This question is a little complicated
Goal: To have an image with a text label underneath it. Problem: The div is part of a parent div, and the div serves an image that will changed based on the screen size.
Here's something like what I'm doing.
<div id="container">
<div id="inner">
<div class="1">--stuff</div>
<div class="2"><img src="server:8080/project?minutes=720&width=<%= out.print(width) %> </div> <-- want to align under this
<div class="3">--stuff</div>
</div>
<div id="label"> <--Want this div aligned underneath "2"
<div class="1">2.0</div> <-- Want the text at 25% of the image (right)
<div class="2">4.0</div> <-- Want the text at 50% of the image (right)
<div class="3">6.0</div> <-- Want the text at 75% of the image (right)
<div class="4">8.0</div> <-- Want the text at 100% of the image (right)
</div>
</div>
What you are wanting to do - Responsive Design - is very cool but also gets pretty complicated. It takes a bit of learning, but CodeSchool has a high quality course called Journey Into Mobile that covers adaptive screen sizes and should get you on the right track.
You'll need to dig into Responsive design, Media Queries & Fluid layouts.
As mentioned above Codeschool does have a great course covering these areas.