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
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.
This question already has an answer here:
Managing justify-content: space-between on last row [duplicate]
(1 answer)
Closed 6 years ago.
I'm using flexbox to create a grid for my website. The grid is used for an articles archive, and should display 3 articles per row with margin between each article.
The problem is: I need the article boxes to start at the beginning of the row and end exactly at the end of the row. So the obvious thing was to use justify-content: space-between;, which I did. So this, in addition to flex-wrap: wrap created the grid I needed. Until I has a odd number of articles. Then the justify-content property left a blank space at the middle of the row, as you can see in the following example:
http://codepen.io/Naxon/pen/NbNXVj
It is very important to me, that no matter what the width of the container is, the items will start at the beginning and will end the the end.
How can I achieve this?
Flexbox doesn't support inter-item padding but we can fake it with calc() and margin. Codepen
.container {
width: 800px;
height: 800px;
background-color: blue;
display: flex;
flex-wrap: wrap;
/*justify-content: space-between;*/
}
.item {
width: 150px;
height: 150px;
background-color: green;
/* margins */
margin-left: 10px;
/* figure out width taking margins into account */
flex-basis: calc((100% - 20px) / 3);
}
/* clear margin on every third item starting with the first */
.item:nth-child(3n+1) {
margin-left: 0;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
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.