This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 5 years ago.
I have a dynamic number of divs in a single container div with display: flex.
Now, I want my child divs to be centered, so I use justify-content: center.
This works perfectly for a small number of children (the blue rectangles)
But for a larger amount of children, setting justify-content: center means that child divs are pushed farther and farther off-screen (the red rectangles).
Children pushed off-screen to the right are still visible because I can just scroll to the right to see the rightmost children.
But children pushed off-screen to the left are not visible because I cannot scroll to the left. This is a problem.
So essentially I want to use flexbox to center its children but prevent the children from being pushed off-screen to the left. Instead, content should overflow to the right, the way that justify-content: flux-start works, but still be centered.
Just use nested flex-containers and set margin-left: auto and margin-right: auto for inner flex-container. This will work because auto margins work only when we have free space to distribute. Demo:
.flex {
display: flex;
}
.inner-flex {
display: flex;
margin-left: auto;
margin-right: auto;
}
/* just styles for demo */
.flex__item {
background-color: tomato;
color: white;
margin: 10px;
padding: 10px;
}
<div class="flex">
<div class="inner-flex">
<div class="flex__item">One</div>
<div class="flex__item">Two</div>
<div class="flex__item">Three</div>
<div class="flex__item">Four</div>
<div class="flex__item">Five</div>
<div class="flex__item">Six</div>
<div class="flex__item">Seven</div>
</div>
</div>
Here is jsFiddle to test resizing.
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 4 months ago.
I was centering the elements of my page with:
display: block;
margin-left: auto;
margin-right: auto;
but when I try to do this with one div that has two buttons they stay in the left corner, why? and how I place them in the center.
Option 1
If both the buttons are inside the div container you also need to specify the width of the div container, because by default div covers the complete width.
div{
max-width:10rem;
margin :0px auto;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
Option 2
You can also flex the div container to center the buttons
div{
display:flex;
align-items:center;
justify-content:center;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
Option 3
You can also use the simple text align center property on the div container so it will center the buttons
div{
text-align:center;
}
<div>
<button>Button1</button>
<button>Button2</button>
</div>
because buttons are inline elements.
Not sure about the context but you can use this centering pattern (both horizontal and vertical) with Flexbox as well:
.container {
display: flex;
align-items: center;
justify-content: center;
}
Positioning is very easy with flexbox. Please try following properties on your div
display: flex;
justify-content: center;
align-items: center;
Justify content will place content centrally along horizontal axis and align items will place content centrally along vertical axis (for flex direction row which is default)
The div css:
text-align: center
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 answers here:
How to get a div centered with another div on the right of it?
(4 answers)
Closed 4 years ago.
I have two divs:
<div class='container'>
<div class='left'></div>
<div class='centered'></div>
</div>
I want to center the second inner div and place the first inner div to the left of the centered one. I don't want the left div to stick to the left side of the screen (as float:left would did) but the opposite: the left div should "stick" to the left side of the centered div.
I would prefer to use flex for layout, but I'm open for other solutions (without JavaScript, css-only).
Children of flex container will follow his parent alignment rules. As you said, you need the left element to be sticked on the left of the centered one. So le left element should not be related to the container, but instead, to the centered element.
.Container {
display: flex;
justify-content: center;
}
.Left {
background-color: red;
position: absolute;
right: 100%;
top: 0;
}
.Centered {
background-color: cyan;
position: relative;
}
/* Demo only */
.Centered, .Left {
border-radius: 4px;
padding: 8px 24px;
}
<div class="Container">
<div class="Centered">
<div class="Left">Left</div>
Centered
</div>
</div>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 5 years ago.
It seems such a simple scenario in my head.
I have a container div that has two child elements, the first of which should appear in the top left corner, and the second should appear dead central.
I've tried to use space-between when using the the justify-content property of Flex on the container.
This splits the content into the top-left and top-right corners.
The element in the top-right corner needs to pull-left until it is dead central.
I can't think of a way to achieve this.
I don't want to make a third hidden element, as that seems like a hack.
#container {
display: flex;
justify-content: space-between;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
Just add width: 50%; to the container and you are good to go
#container {
display: flex;
justify-content: space-between;
width: 50%;
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>
And if you want the second item to be exactly in the center add transform:translateX(50%);, this will move it according to its width
#container{
display:flex;
justify-content: space-between;
width: 50%;
}
#container div:nth-child(2){
transform:translateX(50%);
}
<div id="container">
<div>TOP LEFT</div>
<div>DEAD CENTER</div>
</div>