This question already has answers here:
How to Create Grid/Tile View? [duplicate]
(8 answers)
Closed 6 years ago.
I have boxes in which I'm using flexbox for their layout. Flexbox makes the rows 'organized'. Meaning, if 1 box's height is larger than all the others, all the boxes on the second row get pushed down, and there is space under the boxes first row that have a smaller height.
Here's an image of what I mean:
There's space under box #01 because box #2 has a larger height. I want box #4 to go right under box #1.
How can I make a all boxes to fill up space right above them?
JSFiddle
#wrapper {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 400px;
}
.tile {
background-color: lightblue;
border: 1px solid black;
height: 100px;
width: 100px;
margin: 10px;
}
#n2 {
height: 200px;
}
<div id="wrapper">
<div class="tile" id="n1">01</div>
<div class="tile" id="n2">02</div>
<div class="tile" id="n3">03</div>
<div class="tile" id="n4">04</div>
<div class="tile" id="n5">05</div>
</div>
You can achieve this with flex-direction: column along with flex-wrap: wrap, but you won't be able to preserve the order of the elements.
A JavaScript library like Masonry might be worth looking into.
Like Darryl says, you want to do this with flex-flow: column wrap; and a fixed height on the parent element. This page on CSS-Tricks is invaluable to understanding the syntax, but basically changing the flex-direction flips it sideways. You can specify the order of children by setting the order: XX on the child tiles.
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 1 year ago.
I bet this question was asked a hundred times before but i was unable to find a solution for my exact problem. I have 4 Div boxes and they have a max width of 50% and a min width of 400px, so if the site is smaller (eg. on a phone), the boxes align below each other. Now i want to center the boxes if they are below each other (it looks fine while they are side by side). I tried to use
display: table; margin: 0 auto;
but it doesnt work. Another thing I tried was to place everything inside of another div and give them the parameters above and in addition i tried to play with the width of this one (max-content, min-content, auto, fit-content) but it didn't work either. Does anyone know an easy workaround?
Here a short version of my problem:
.format {
width: 50%;
float: left;
height: auto;
min-width: 500px;
background-color: lightblue;
display: table;
margin: 0 auto;
}
<div class="format">
<p>Landestrainer</p>
</div>
<div class="format">
<p>U17</p>
</div>
<div class="format">
<p>U15</p>
</div>
<div class="format">
<p>Sonstige</p>
</div>
sorry for my partly bad english. Hopefully, it was not that bad :)
I would recommend using display: flex instead to center them.
So you would need to put all 4 divs inside a parent div and apply the css below:
.parent-div {
display: flex;
flex-direction: column;
align-items: center;
}
New Edit based on the screenshot given
My approach for this problem would be something like this:
Make use of display: flex and #media query
.parent-div {
// This will divide the page into 2 columns cause of sub-parents
display: flex;
align-item: center;
}
.sub-parent{
display: flex;
align-items: center;
flex-direction: column;
}
// #media query means that if the screen becomes smaller than 768px (specified below), then apply the CSS queries which in this case apply flex-direction: column to the "parent-div"
#media screen and (max-width: 768px) {
.parent-div {
flex-direction: column;
}
}
<div class="parent-div">
<div class="sub-parent">
<div class="format">
<p>Landestrainer</p>
</div>
<div class="format">
<p>U17</p>
</div>
</div>
<div class="sub-parent">
<div class="format">
<p>U15</p>
</div>
<div class="format">
<p>Sonstige</p>
</div>
</div>
</div>
Here's the link to CSS display: flex guide: Display Flex Guide
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I'm creating a nav menu using flex. I want all of the items in my menu to display in a single row when the screen is wide enough to support that, and to snap to two rows of items when it needs to wrap. I have this mostly working:
.content {
width: 400px;
height: 150px;
border: thin solid black;
}
.outer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.inner {
display: flex;
justify-content: space-around;
flex-grow: 1;
}
span {
font-size: 24pt;
}
<div class="content">
<div class="outer">
<div class="inner">
<span>one</span>
<span>two</span>
<span>three</span>
</div>
<div class="inner">
<span>four</span>
<span>five</span>
<span>six</span>
</div>
</div>
</div>
CodePen here.
This works perfectly when the page is wide enough:
And it works mostly perfectly when the page is narrow (try changing the width of .content to 250px):
However, now I'm trying to make it so the items in each row line up with each other. I'm going for something like this:
I've tried every combination of flex-grow, flex-shrink, and justify-content that I can think of, but I can't get the items to align.
I know I could probably use a media query and swap out the content for a grid when the window gets too narrow, but I'd like to simplify this as much as possible. Is there a way to align the children of two flex divs?
Alternatively, is there a way to use a grid layout that shows as 1 row until it needs to wrap, and then it shows as 2 rows?
It causes by span width.
if span width not fixed, span will have dynamic width;
set width on span;
Try this
Add to te span
span {
flex: 33%;
}
Or change the porcent acording to the amount of items the div has
This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 3 years ago.
I've been trying to do the simple and mundane task of centering divs in CSS with no success.
Here's the code snippet:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#content {
}
.list-item {
position: relative;
display: inline-block;
border: solid thin #444;
}
.list-item .scene {
width: 200px;
height: 200px;
}
.list-item .description {
width: 200px;
margin-top: 0.5em;
}
.storyboard-row {
display: flex;
/* Method 1 */
/*justify-content: center;*/
/* Method 2 */
/*margin-left:auto;*/
/*margin-right:auto;*/
}
<div id="content">
<div class="storyboard-row">
<div class="list-item">
<div class="description">Scene 1</div>
<div class="scene"></div>
</div><div class="list-item">
<div class="description">Scene 2</div>
<div class="scene"></div>
</div><div class="list-item">
<div class="description">Scene 3</div>
<div class="scene"></div>
</div>
</div>
</div>
What I'm trying to center: The div with class="storyboard-row" in relation to the div with id="content"; and the div with id="content" in relation to its parent (the <body>).
What I tried: In the snippet you will find "Method 1" and "Method 2" which are my attempts at centering stuff around. The first method, using justify-content: center;, works but on downsizing the window, the leftmost squares will be pushed outside off the screen. The second method simply does nothing. Bootstrap can be used.
What I need to continue to happen: Currently the div with class="storyboard-row" has display: flex; which I used so that when downsizing the window, a scrollbar appears instead of pushing down a number of squares (which happens with block). In the snippet, only one row is shown, but the idea is to have multiple (each bellow the former).
EDIT: Thanks to #TemaniAfif the centering problem was fixed. However, because the div with id="content" now has display: flex, when rows are small enough in relation to the screen, they appear on the same line. An updated snipped can be found here: https://jsfiddle.net/hdnz34g8/
If I remove the display: flex from it, the rows appear as intended, line-wise, but they're no longer centered.
Question
Can you produce such layout with CSS?
I want to have a single row with 2 children:
Child A has multiple rows,
Child B has a single one.
I want the the layout in which:
Child A accomodates on a single line as many children as possible for A and B to still fit on a single line.
Child A has the smallest width possible to achieve #1.
Child B then takes all the remaining space.
My HTML:
<div class="Container">
<div class="ChildA">
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</div>
<div class="ChildB">
<button>
Click me please
</button>
</div>
</div>
My desired layout:
Sketch of a solution using Flexbox
So far I came up with the following CSS using Flexbox:
.Container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
border: 4px solid black;
}
.ChildA {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: 4px solid red;
}
.ChildB {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
border: 4px solid blue;
}
It produces layout pictured below. The problem is it violates rule #2 - child A does not have the smallest width possible, but instead takes all the remaining space, which I want to be taken by child B instead.
CSS Grid?
It seems the solution may be possible using CSS Grid (and it's auto-fit value), but I haven't been able to produce a fully working one myself yet. The closes I've come is that pen, which works fine on some window widths, but I cannot work out how to remove max-width: 50vw constraint.
Note
I want a fully dynamic/flexible solution, which would work with content of any size in the containers.
Children content in my example are inputs and button, but that's just a random example - they can be <div>s or any other elements, if it makes the layout easier to implement.
Fiddle
https://codepen.io/anon/pen/mjdmXG?editors=1100
This question already has answers here:
Flex item should align left, not center, when it wraps
(3 answers)
Closed 6 years ago.
Having some troubles getting a layout correctly responsive using Flexbox.
Imagine a page only containing some panels. The goal is to show an x-amount of panels / row, aligned horizontal & vertical as the other ones.
The problem I am currently facing is the alignment when a panel switches from row. Trying to align a panel straight underneath the above one, but this is not working out at all.
My results so far:
Desktop
Tablet (here you'll see the problem in alignment (I should be right underneath the top left one...))
Phone
Code (simplified)
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
-
.container {
display: flex;
flex-flow: row wrap;
max-width: 960px;
justify-content: space-around;
.item {
margin-top: 24px;
width: 264px;
height: 183px;
background: red;
}
}
try justify-content: space-between; instead of space-around for .container