How can I make this grid without creating 2 columns?
Something like this?
* {
box-sizing: border-box;
}
.container {
width: 100%;
}
.left {
width: 66.66%;
height: 400px;
float: left;
background-color: blue;
}
.right {
width: 33.33%;
height: 200px;
float: right;
background-color: red;
border: thin solid black;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="right"></div>
</div>
Here is my flex box as you want ..
.vert_flex {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
border: 1px solid black;
}
.hor_flex {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border: 1px solid black;
}
<div class="hor_flex">
<div style="flex : 2; height: 300px">width 66.6%</div>
<div class="vert_flex" style="flex : 1; height: 300px">
<div class="hor_flex" style="flex : 1">width 33.3%</div>
<div class="hor_flex" style="flex : 1">width 33.3%</div>
</div>
</div>
Flex makes life super easy..
.container {
display:flex;
}
.left {
flex:2;
background-color: #c1c1c1;
}
.container_right {display: flex;
flex: 1;
flex-direction:column}
.right {
flex:1;
background-color: #456456;
}
and the html..
<div class="container">
<div class="left">aaaaaaaaaaaa</div>
<div class="container_right">
<div class="right">bbbbbbbbbbbb</div>
<div class="right">cccccccccccc</div>
</div>
</div>
You just have to think of everything as a container.. everything inside that container can be flexed..
With Flex you need to avoid defining anything with px if possible. stick with units of
%
vw/vh r
rem/em
Related
I need to place block with overflowed content inside flex column (flex-grow:1) and not to break parent wrapper max-width.
Im unable to change flex styles (so I cant set flex column min-width:0), Im able to edit only the content inside flex column.
Any thoughts?
.wrapper {
max-width: 800px;
background-color: grey;
}
.flex {
display: flex;
}
.column1 {
width: 200px;
height: 100px;
flex-shrink: 0;
background-color: green;
}
.column2 {
flex-grow: 1;
background-color: red;
/* min-width: 0; */
}
.overflow {
max-width: 100%;
overflow: auto;
}
.wideContent {
height: 100px;
width: 2500px;
}
<div class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>
Use min-width: 100%;width: 0; on the overflow element:
.wrapper {
max-width: 800px;
background-color: grey;
}
.flex {
display: flex;
}
.column1 {
width: 200px;
height: 100px;
flex-shrink: 0;
background-color: green;
}
.column2 {
flex-grow: 1;
background-color: red;
}
.overflow {
min-width: 100%;
overflow: auto;
width: 0;
}
.wideContent {
height: 100px;
width: 2500px;
}
<div class="wrapper">
<div class="flex">
<div class="column1"></div>
<div class="column2">
<div class="overflow">
<div class="wideContent"></div>
</div>
</div>
</div>
</div>
I am struggling to make my .centerIt divs be centered vertically, and to have the .div1 stay scrollable after I add more .centerIt divs into the column.
The .centerIt divs have to keep their height: 20px and not squeeze after I add more of them.
JSFiddle example
.container {
display: flex;
background: red;
width: 300px;
height: 300px;
}
.div1 {
background: yellow;
height: 90%;
width: 27%;
margin: 5px;
overflow-y: scroll;
}
.div2 {
background: blue;
height: 90%;
width: 74%;
margin: 5px;
}
.centerIt {
background: green;
width: 100%;
border: solid 1px black;
height: 20px;
color: green;
}
<div class="container">
<div class="div1">
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
<div class="centerIt"></div>
</div>
<div class="div2"></div>
</div>
Just try to add min-height: 20px to .centerIt instead of height and
display: flex;
flex-direction: column;
justify-content: center;
to .div1 styles, should do it.
JSFiddle fork
I am trying to achieve the following layout with flexbox.
┌─┬─────┐
│A│ │
├─┤ C │
│B│ │
└─┴─────┘
Is it possible to do so without wrapping A and B into a wrapper?
Yes, it's possible. Take in account that in this example the main container has a fixed width and height.
#container{
height: 200px;
width: 300px;
display: flex;
flex-flow: column wrap;
}
#container, #A, #B, #C{
box-sizing: border-box;
border: 1px solid black;
}
#A{
height: 50%;
width: 100px;
}
#B{
height: 50%;
width: 100px;
}
#C{
height: 100%;
width: 200px;
}
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
</div>
unfortunately, there is no fixed height, so I ended up with doing things old way — via tables, like this
HTML:
<div id="container">
<div id="A">A<br>AAA<br>BBB</div>
<div id="B">B</div>
<div id="C">C</div>
</div>
CSS:
#container {
width: 100%;
outline: 1px solid black;
display: table;
}
#A,#B,#C {
outline: 1px solid crimson;
}
#A,#B {
width: 100%;
}
#C {
display: table-cell;
vertical-align: middle;
width: 50%;
}
need some help. How to fix bug with .half-img2{ margin-top: 10px; }
http://prntscr.com/94uqok
These 2 imgs height must be equal to main-img
http://plnkr.co/edit/Dvj5HfG6hJqvYPxr0ljJ?p=preview
Html:
<style type="text/css">
.test{
display: flex;
}
.test>div{
flex: 1;
}
.test .main-img{
flex-grow: 2;
}
img{
width: 100%;
}
.half-img{
margin-left: 10px;
}
.half-img2{
margin-top: 10px;
}
</style>
<div class="test">
<div class="main-img">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img">
<div class="half-img1">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
<div class="half-img2">
<img src="http://fakeimg.pl/350x200/00CED1/FFF/?text=img+placeholder">
</div>
</div>
</div>
I'll ignore the images sizes as these are not really relevant to the div layout issue.
A judicious use of margins and flex-column div layout seems to be required.
Layout would be something like this.
* {
box-sizing: border-box;
}
.test {
display: flex;
width: 80%;
margin: 1em auto;
border:1px solid green;
}
img {
display: block;
}
.test div {
}
.main-img {
flex:2;
margin-right: 10px;
background: lightblue;
}
.half-img {
display: flex;
flex-direction: column;
height: 250px;
}
.half-img {
flex:1;
display: flex;
flex-direction: column;
}
.half-img div {
flex:1;
background: lightblue;
}
.half-img1 {
margin-bottom: 5px;
}
.half-img2 {
margin-top: 5px;
}
<div class="test">
<div class="main-img">
</div>
<div class="half-img">
<div class="half-img1">
</div>
<div class="half-img2">
</div>
</div>
</div>
I'm currently strugging to make a node-webkit app fit the height of the current window. Below is an image of what I'm trying to achieve.
Desired result :
HTML :
<body>
<div class="header">
THIS IS A HEADER WITH LINKS AND THINGS
</div>
<div class="content">
<div class="sidebar">
SIDE BAR WITH MORE LINKS AND THINGS
</div>
<div class="mainarea">
<div class="chatbox">
SOME SORT OF BOX WITH THINGS IN
</div>
<form>
<input name="q" placeholder="type something here"/>
<input type="submit" value="Send"/>
</form>
</div>
</div>
</body>
CSS :
body {
height: 100%;
}
.header {
height: 80px;
background-color: red;
}
.content {
width: 100%;
height: 100%;
}
.sidebar {
float: left;
width: 20%;
height: 100%;
background-color: yellow;
}
.chatbox {
width: 100%;
border-style: solid;
border-width: 1px;
}
.mainarea {
float: right;
width: 80% !important;
background-color: green;
height: 100%;
}
Demo :
JSFiddle
Instead of float:right/left for .mainarea/.sidebar use display:table-cell. Also :
body, html { height: 100%; margin:0; }
.content { width: 100%; height: calc(100% - 80px); display:table; }
JSFiddle
You could use flexbox too.
http://jsfiddle.net/tetm7/
HTML
<div class="main">
<div class="header">HEADER</div>
<div class="content">
<div class="sidebar">SIDEBAR</div>
<div class="box">TEXT BOX</div>
</div>
</div>
CSS
html, body, .main {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 100px;
background-color: red;
}
.content {
display:flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
width: 100%;
height: 100%;
background-color: yellow;
}
.sidebar {
background-color: orange;
width: 200px;
}
.box {
background-color: green;
width: 300px;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;
}