Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've been looking around at flex examples and having a go myself. I don't think this is possible with flexbox, but I thought I'd check before giving up on it.
The layout can be seen here:
All three elements are in the same parent div and unforntunately I'm stuck with this HTML structure so my options are limited. Sorry about the vague title. I couldn't really articulate the layout in words.
Thanks.
Since some kind soul has seen fit to answer...here's my version...no extra HTML required.
Codepen Demo
.wrapper {
width: 50%;
margin: 25px auto;
height: 300px;
border: 1px solid grey;
justify-content: space-between;
align-content: space-between;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.box {
width: 49.5%;
background: #000;
}
.left {
flex: 0 0 100%;
/* equals height */
background: lightblue;
}
.right.top {
flex: 0 0 39%;
/* equals height */
}
.right.bottom {
flex: 0 0 39%;
/* equals height */
}
<div class="wrapper">
<div class="box left"></div>
<div class="box right top"></div>
<div class="box right bottom"></div>
</div>
As I'm trying to learn flex myself I thought I'd give this a go and came up with the following (otherwise this question should be closed for being too broad)
.container {display:flex;}
.column {flex:1;}
.row {flex:1; background-color:black;}
#outer {flex-direction:row; height:250px;} /* height for example purpose only */
#left {background-color:black; margin-right:20px;}
#right {flex-direction:column;}
#top {margin-bottom:50px;}
<div class="container" id="outer">
<div class="column" id="left"></div>
<div class="column container" id="right">
<div class="row" id="top"></div>
<div class="row" id="bottom"></div>
</div>
</div>
Related
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 11 months ago.
I have a report that has to be in blocks (divs), these divs must be aligned horizontally (with width of 50% for each), meaning that the second is to right of the first, and the third must be below the first one regardless of the height of the second.
My description might be a little fuzzy, so I attached an image that represents the idea:
Sample:
Thank you very much in advance.
I tried normal CSS hacks (float, position, display) and so on; and it didn't work.
I tried grid layout, and I tried to use Bootstrap properties; in all the above, block number 3 starts, yes, below block one but after the end of block number 2 height.
Try this:
.maindiv { /* Masonry container */
column-count: 2;
column-gap: 1em;
}
.item { /* Masonry bricks or child elements */
display: inline-block;
margin: 0 0 1em;
width: 100%;
}
here's a quick way of doing it with flexbox, link to codepen. The downside is that you would need to have 2 columns, so on mobile, the second col would go below the first one. Ideally, you would do this with CSS Grid, or JS Masonry plugin
And here's the code itself:
HTML:
<div class="example-wrap">
<div class="col">
<div class="card" style="height: 100px;"></div>
<div class="card"></div>
<div class="card" style="height: 400px;"></div>
</div>
<div class="col">
<div class="card"></div>
<div class="card" style="height: 400px;"></div>
<div class="card" style="height: 150px;"></div>
</div>
CSS:
.example-wrap {
display: flex;
width: 600px;
justify-content: space-between;
align-items: flex-start;
box-shadow: 0 0 0 1px black;
}
.col {
width: calc((100% - 30px) / 2);
}
.card {
width: 100%;
height: 300px;
box-shadow: 0 0 0 1px red;
margin-bottom: 30px;
}
Masonry is the best way to do what you want.
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
// element argument can be a selector string
// for an individual element
var msnry = new Masonry( '.grid', {
// options
});
.grid-item {
width: 40%;
margin: 20px;
border: 1px solid black;
height: 100px;
text-align: center;
color: red;
font-weight:700;
}
.height-2 {
height:300px;
}
<script src="https://unpkg.com/masonry-layout#4.2.2/dist/masonry.pkgd.min.js"></script>
<div class="grid">
<div class="grid-item">1</div>
<div class="grid-item height-2">2</div>
<div class="grid-item height-2">3</div>
<div class="grid-item">4</div>
</div>
See Masonry for more options/methods : https://masonry.desandro.com/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I would like to create something like this.....
However, when i put text in one of the grid items.. the div stretches like this
You just need to add grid-template-columns in your css like this:-
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 10px;
background-color: #000;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
This question already has answers here:
Why don't flex items shrink past content size?
(5 answers)
Closed 5 years ago.
This one is really frustrating me and Im not sure if I worded that correctly.
Basicly, I need my page to stay at 100% height and not grow in height as it is a single page website.
I have a list in an aside and whenever I add content to the list it makes the list grow in size when I need the overflow to be hidden (I have a custom scrollbar applied in react).
Anyhow, the growing (weirdly) only occures when the list has the height of flex: 1;. When I add a fixed height, everything is fine.
Here is how it acts with a fixed height (should also be like this when no fixed height is applied):
When I remove the fixed height of the red box (the list) then it causes itself and the whole page to grow:
See it in action:
Heres the pen to see for yourself: https://codepen.io/anon/pen/zPJdoK
I know theres some unnecassary markup but I needed that to be sure that it represents the actual webpage I am working on.
Sorry for not being able to explain it any more detailed, Im a bit confused as of now...
Are you referring to something like this perhaps? I'm not too sure.
.container{
background: black;
width: 1000px;
height: 300px;
display: grid;
grid-template-columns: 180px 1fr 180px;
grid-template-rows: 1fr;
grid-template-areas: "nav main aside";
}
nav {
grid-area: nav;
background: blue;
}
main {
grid-area: main;
background: black;
display: flex;
flex-direction: column;
}
aside {
grid-area: aside;
background: green;
display: flex;
flex-direction: column;
}
aside > header, aside > footer{
height: 60px;
background: yellow;
}
aside > main {
flex: 3;
background: green;
}
aside > main > .content {
background: red;
margin: 10px;
max-height: 200px;
overflow-y:scroll;
}
.space_taker{
margin: 10px;
height: 30px;
background: white;
}
<div class="container">
<nav></nav>
<main></main>
<aside>
<header>
</header>
<main>
<div class="content">
<div class="space_taker">asdafasdfasdf</div>
<div class="space_taker">asdfasdf</div>
<div class="space_taker">asdfs</div>
<div class="space_taker">dfgdgf</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdfs</div>
<div class="space_taker">dfgdgf</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdfs</div>
<div class="space_taker">dfgdgf</div>
<div class="space_taker">asdasd</div>
<div class="space_taker">asdasd</div>
</div>
</main>
<footer>
</footer>
</aside>
</div>
Hoping this is not a nonsense question as it is in a way a tad non-specific.
It's quite simple - I am aiming to produce a design splitting the viewport/screen into rough halves (60/40) vertically, similar to how AirBnB do: -
AirBnB New York
Is this just as simple as using flexbox columns (I am using Bootstrap 4), specifying the column widths and setting the right-hand side column to position: fixed?
Any advice that anyone has would be most welcome as I have never approached this type of design before and I want to make sure I am not overlooking anything.
Here's a flex layout based solution.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 60vh;
}
.box .row.content {
flex: 1 1 40vh;
}
<div class="box">
<div class="row header">
<p><b>header</b>
(60%)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(40%)
</p>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 years ago.
Improve this question
I'm super new to the world of coding, so please bear with me ;)
I want to know if I could use a flexbox around an image to make it responsive rather than the "img-responsive" class?
I would imagine this would also be the better option for resizing a box that has an image and text in it?
B.
Responsive image manipulation with flex properties
For production level code we have to add CSS Reset Code
.container {
max-width: 1200px;
display: flex;
align-items: center;
-webkit-justify-content: center;
/* Safari */
justify-content: center;
}
.item {
padding: 10px;
}
img {
width: 100%;
height: auto;
display: block;
}
<div class="container">
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image1">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image2">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image3">
</div>
<div class="item">
<img src="http://i.imgur.com/EvzEpEi.jpg" alt="image4">
</div>
</div>