This question already has answers here:
Better way to set distance between flexbox items
(40 answers)
Closed 9 months ago.
I'm trying to manipulate divs without using float, using display: inline-block; in my css allows me to get the siblings next to each other within a container div, but with inline-block, I can't space them apart using margin-left: 20px;, margin-right :20px; ... and so on.
I'm sure there's a really simple solution, even if it doesn't involve using display: inline-block;, I just want to avoid floats and preferably avoid padding too.
you can try flex-box method to create space between two div which is inside a div (I conclude that from your question )
.parent{
border:2px solid red;
display:flex;
justify-content:space-around;
}
.parent div{
border:3px solid black;
}
<div class="parent">
<div class="child1">
child1
</div>
<div class="child2">
child2
</div>
</div>
you can also add many child div as you want , they will automatically make place in the parent container.
Here you can see below how i managed to do so without display:inline-block; and this will not break on any device unlike inline-block.
.box {
width: 200px;
height: 200px;
background: #F3F3F3;
color: #000;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.container {
display: flex;
margin-bottom: 40px;
}
.container.two {
justify-content: space-between;
}
.container.three {
justify-content: space-evenly;
}
Margin 20px in between
<div class="container">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align boxes on left and right according to width
<div class="container two">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Align even spacing on left and right
<div class="container three">
<div class="box">
BOX 1
</div>
<div class="box">
BOX 1
</div>
</div>
Related
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 1 year ago.
I have two elements: a back-button and a Headline. Both should be in the same row, the back button should be left aligned and the Headline should be centered.
Let's take this example:
<div class="wrapper">
<div class="button">
<button>Back</button>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
</div>
What do I have to do in CSS to get this result:
Image
I tried using Translate X, but of course this solution isn't a responsive one, that's why I am searching one for all view-ports.
Big thanks and have a good rest of the weekend!
Center everything in wrapper using flexbox, then move button to the left with absolute positioning.
.wrapper {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
button {
position: absolute;
left: 0;
}
<div class ="wrapper">
<button>Back</button>
<h2>Headline</h2>
</div>
Here's an easy way to do this if you know that it'll just be these 2 elements inside of the .wrapper container.
What you do is set the .wrapper to position: relative;, then set .button to position: absolute; this will allow you to position the .button inside of the .wrapper without taking up any space inside of the div. Then you set the .header to width: 100%; and text-align: center;
You'll need to play around with mobile, since the button will span over the header, at that point I would probably stack the elements to make it easier to for the user to click the back button.
.wrapper {
position:relative;
background: #dedede;
}
.button {
position:absolute;
left:0;
top:50%;
transform:translate(0, -50%);
}
.headline {
width:100%;
text-align:center;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
This solution is using css flex.
.wrapper{
display: flex;
flex-direction:row;
justify-content: flex-start;
align-items: baseline;
}
.headline{
display: flex;
flex-direction:row;
justify-content: center;
width:100%;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
<div class="wrapper">
<div class="button" style="float: left;">
<button>Back</button>
</div>
<div class="headline">
<h2 style="text-align: center;">Headline</h2>
</div>
</div>
Actually, this is not exactly what you want.
But very simple and tricky way.
Another easy way using css flex:
.wrapper {
display: flex;
align-items: center;
}
.headline {
margin: auto;
}
<div class ="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class ="headline">
<h2>Headline</h2>
</div>
</div>
using CSS GRID
this is responsive! centered,
and all the CSS code is in the parent selector!
(with flex, you will write a lot for this simple thing)
explanation
place-items are for centering. (is like writing justify-.. and align-..)
grid-template-column is for specifying how the grid should be (there are many ways to set the grid, but this is the shortest)
in fact, AUTO gets the width of the element and set to it, but 1FR gets
(AllWidthParent-AutoChildWidth)
Code
<div class="wrapper">
<div class="button">
<button>Back</button>
</div>
<div class="headline">
<h2>Headline</h2>
</div>
</div>
<style>
.wrapper {
display: grid;
grid-template-columns: auto 1fr;
place-items: center;
width: 100%;
}
</style>
https://jsfiddle.net/laaouatni/vg5L38am/1/
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
Closed 3 years ago.
I have two DIV-s, which must fill the space of their upper div. Size of the first div can differ - depends on the text inside the div. What I want is to show dots to the end of remaining space.
My solution:
.drugi {
border: 1px dashed black;
}
<div>
<div>this is testing</div>
<div class="drugi"></div>
</div>
Problem is output:
Dots are occupying the whole space. What I would like it to be is this:
Please note: I've already tried solutions like this and this. My question differs, because I don't have fixed width of either DIV-s, so second DIV must simply fill remaining space with dots, without overlapping the first DIV.
You can use flexbox.
.drugi{
border-bottom: 1px dashed black;
flex: auto;
}
.d-flex {
display: flex;
}
<div class="d-flex">
<div>this is testing</div>
<div class="drugi"></div>
</div>
<div class="d-flex">
<div>this is</div>
<div class="drugi"></div>
</div>
Use Flex
.outer{
display:flex;
}
.drugi{
border-bottom:1px dashed black;
flex:1;
}
<div class="outer">
<div>this is testing this is testing</div>
<div class="drugi"></div>
</div>
Try This:
HTML:
<div class="Table">
<div class="row">
<div class="Table_title">this is testing</div>
<div class="Table_border"></div>
</div>
</div>
CSS:
.Table .row {
display: table;
padding-bottom: 10px;
}
.Table_title{
display: table-cell;
white-space: nowrap;
}
.Table_border{
border-bottom: 1px dashed black;
width: 100%;
display: table-cell;
}
This question already has answers here:
Why is a flex item limited to parent size?
(1 answer)
Why don't flex items shrink past content size?
(5 answers)
Closed 3 years ago.
See problem in codepen: https://codepen.io/pencillrpal/pen/QWLOLGv
I have a flex container in which I'm going to have a horizontal slider with elements as long as the full page width.
But I realized I can't control the width of the child elements, because they will always have a width that makes them fit the container, and they don't extend beyond it.
I've found a trick though. If I wrap my child divs to a div one by one it will work as I want it to.
Why does this work this way?
.container {
display: flex;
flex-direction: row;
justify-content: center;
height: 40vh;
max-width: 100%;
overflow-x: hidden;
border: 5px solid black;
margin: 0 auto;
}
.box {
position: relative;
width: 90vw;
margin: 10px;
line-height: 10vh;
text-align: center;
background: black;
color: white;
border: 5px solid red;
}
<h1>Box should have 100vw width</h1>
<div class="container">
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<h1>This one has though</h1>
<div class="container">
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
<div>
<div class="box">
<h3>Box</h3>
</div>
</div>
</div>
You can control the width of the flex children. All flex children have default flex values to control the flex-grow and flex-shrink properties. Disable these properties and you'll have control over the width.
Add these lines to your CSS.
/**
* Disable flex grow and shrink so that it no longer tries to divide the
* space between the .box elements.
*
* Use flex-basis or width to control the width of the element.
*/
.box {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 90vw;
width: 90vw;
}
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Wrapping flex items in the last row [duplicate]
(1 answer)
Closed 3 years ago.
I have a list of items I want to display with CSS. Originally, it was only two items side-by-side on one line but now I want to make it responsive for larger screens so I want to make it display 3 items on one line instead. My old code looks like this with justify-content:space-between. It looks good with an odd number of items to display.
.flex-container-old{
margin-top: 50px;
background: magenta;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box-old{
width: 40%;
border: 1px solid black;
margin-bottom: 20px;
height: 300px;
background: orange;
}
.wrapper{
margin: 0 auto;
width: 80%;
}
body{
background:#D3D3D3;
}
<div class="wrapper">
<div class="flex-container-old">
<div class="box-old">
</div>
<div class="box-old">
</div>
<div class="box-old">
</div>
<div class="box-old">
</div>
<div class="box-old">
</div>
</div>
</div>
So naturally I extended it to three items in one row by modifying the width property only to end up with the below.
.flex-container-new{
background: lightblue;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
width: 30%;
border: 1px solid black;
margin-bottom: 20px;
height: 300px;
background: orange;
}
.wrapper{
margin: 0 auto;
width: 80%;
}
<div class="wrapper">
<div class="flex-container-new">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
My problem in the case of the above code with three items on one line is I want the last item in last row to be pushed to the left, aligned with the middle item in the row above it. Sadly bootstrap is not an option. This is for learning purposes. It there a way I can achieve the above with just CSS? Many thanks in advance.
This is easier to control using CSS Grid because we can dictate both the x and y axis. With Flexbox, you can only reliably control the x axis. If you haven't heard about the fr unit, it's defined by Mozilla as follows:
The fr, which is short for “fraction”, is a unit which represents a fraction of the available space in the grid container.
Another nice thing about using Grid is that we can drop the height and margin-bottom set in .box and also the flex-wrap rule. Everything about the layout of this grid, from the height of the cells to the grid-gap spacing between them, is all defined in the parent.
.grid-container-new {
background: lightblue;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 300px);
grid-gap: 20px;
}
.box {
border: 1px solid black;
background: orange;
}
<div class="grid-container-new">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
jsFiddle
I am making a music playback controller, and the container has 3 sections: left, center, and right. However, since the left and right sides have different widths, the center section isn't in the true center of the div, but I need it to be. I am using flexbox's space-between option to layout the items.
#container {
display: flex;
justify-content: space-between;
background-color: lightgrey;
}
#container > div {
height: 100px;
border: 2px dashed red;
/*This is only for looks*/
text-align: center;
padding: 5px;
}
<div id="container">
<div>Left Side</div>
<div>I want this centered</div>
<div>Right Side (Extra text for extra length)</div>
</div>
You can use margins to approximate centering. But in order to get perfect centering with flexbox that's consistent across a variety of viewports, you'll have to slightly modify your HTML somewhat.
You need to turn the direct children of #container into flex containers themselves with a display:inline-flex declaration and give them a flex value of 1 and justify-content: center.
From there, you add your content into child divs. To get alignment on the left and right divs, use margin-right: auto and margin-left: auto, respectively.
#container {
display: flex;
background-color: lightgrey;
}
.flex {
flex: 1;
display: inline-flex;
justify-content: center;
}
.flex > div {
height: 100px;
border: 2px dashed red;
text-align: center;
padding: 5px;
}
.left div {
margin-right: auto;
}
.right div {
margin-left: auto;
}
<div id="container">
<div class="left flex">
<div>Left Side</div>
</div>
<div class="center flex">
<div>I want this centered</div>
</div>
<div class="right flex">
<div>Right Side (Extra text for extra length)</div>
</div>
</div>