I have a flexbox layout with buttons. When a user moves the mouse over the buttons, their positions jump around.
My source code is quite simple:
.flexy {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 200px;
}
<div class="flexy">
<div>
Content
</div>
<footer>
<button>Button 1</button> <button>Button 2</button><br/>
<button>Button 3</button> <button>Button 4</button><br/>
</footer>
</div>
Moving the mouse between the two rows of buttons causes a lot of movement. Is there a fix I can use to prevent this?
Give your footer a min-height or flex-basis with the value being the actual height of the footer. I tested this in IE11, Chrome, Firefox, Safari and they all get along with this fix.
Option 1
footer {
flex-basis: 46px;
}
Option 2
footer {
min-height: 46px;
}
I'm not really sure what's causing the problem. But I found that if you simply add a border to the button the shifting stops.
.flexy {
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
height: 200px;
}
button {
border: 1px solid #777;
padding: 5px; /* optional */
margin: 5px; /* optional */
}
<div class='flexy'>
<div>
Content
</div>
<footer>
<button>Button 1</button> <button>Button 2</button><br/>
<button>Button 3</button> <button>Button 4</button><br/>
</footer>
</div>
Revised Demo
Related
This question already has an answer here:
How can I align the first button to the left using flex box? [duplicate]
(1 answer)
Closed 26 days ago.
I have a div that uses flex. I simply want to align the first button on the left, and the rest to the right. HTML:
<div class="container">
<button class="first-button">Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>
And CSS:
.container {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
But all the buttons ends up on the right.
How can I align Button 1 on the left? That is:
Codepen is here https://codepen.io/mark-kelly-the-looper/pen/jOpzgVX
Easiest solution is to use margin to push it auto to the left
.container {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.first-button {
margin-right: auto;
}
<div class="container">
<button class="first-button">Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
</div>
The style on the button you want left aligned should be:
.first-button {
margin-right : auto;
}
I am having trouble getting an element to stick to the bottom of a div with flexbox, or by any other means in a way that works well.
So far I've tried:
adding margin-top:auto; to the last div
adding margin-bottom:auto; to the p tag above the last div
align-self: flex-end; to the last div
position: absolute; bottom: 0; to the last div
switching to css grid
wrapping the elements I want at the top of the container in their own div
align-self to each element individually
height: 100%; to the p tag above the last div
.outer-div {
display: flex;
flex-wrap: wrap;
align-content: baseline;
border: 3px solid black;
width: 100%;
height: 100vh
}
.element {
margin: 0px auto 0px 0px;
align-self: baseline;
}
.par {
flex: 100%
}
.buttons {
flex: 100% margin: auto 0px 0px 0px;
}
<div class="outer-div">
<p class="element" href="">element</p>
<small class="other-element">element</small>
<p class="par">word</p>
<div class="buttons">
<button>button 1</button>
<button>button 2</button>
</div>
</div>
any margin that was there to begin with collapsed
any margin that was there to begin with collapsed
it did nothing.
it almost worked but it covered some of the content.
pushes some of the content outside of the div.
didn't change anything.
the p tag wouldn't stretch fully.
pushed the last element outside of the div.
Switch to flex-direction: column, so that the main axis is vertical, and use margin-top: auto on the buttons.
.outer-div {
display: flex;
flex-direction: column;
height: 100vh
}
.buttons {
margin-top: auto;
}
body {
margin: 0;
}
<div class="outer-div">
<p class="element" href="">element</p>
<small class="other-element">element</small>
<p class="par">word</p>
<div class="buttons">
<button>button 1</button>
<button>button 2</button>
</div>
</div>
I have a few html elements next to each other in a container positioned with display:inline-flex.
This works well for button elements, but as soon as I try to add an input type="text" element, the textbox is placed below the buttons (only in Internet Explorer 11; not sure about IE10 or below).
It works as expected (textbox in same line as buttons) in Firefox, Chrome and even Edge.
How can I get IE to display this correctly?
See jsFiddle for full html and css code to illustrate the problem: https://jsfiddle.net/vm2kcwd9/1/
.container {
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
vertical-align: top;
justify-content: center;
align-items: center;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
IE11 is known for having many flex-related bugs.
A simple and easy solution in this case would be to make the parent a flex container:
.container {
display: flex; /* new; forces all children into a single row */
height: 2em;
}
.container>* {
height: 100%;
display: inline-flex;
/* vertical-align: top; <--- not necessary anymore */
justify-content: center;
align-items: center;
margin: 5px; /* for demo only */
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
Also, since you're making button elements into flex containers, consider this:
Flexbox not working on <button> element in some browsers
Easy solution just add display:flex to parent instead
.container {
display: flex;
justify-content: center;
/* align-items: center; you might not need this */
height: 2em;
}
.container>* {
height: 100%;
margin: 10px;
}
<div class="container">
<button>test</button>
<button>test 2</button>
<button>test 3</button>
<input type="text" value="hello" />
</div>
I'm wondering if there is a way to do this with just CSS but so far I haven't really found anything.
I have a few buttons that sit inline with each other inside of a responsive container.
However, when they wrap, and the 2nd button drops to a new line, I would like to then center them. Anyone know if this is possible with just css?
A fiddle showing basically what I'm looking for: https://jsfiddle.net/5bvmnt3j/
In the fiddle pretend the wrapper is responsive and as the browser width changes, and makes the buttons wrap, we get the layout I'm showing in the wrapper2 class instead of what is seen in the original wrapper class.
I know normally this isn't really something you would expect to see with a css only solution but I've seen some pretty cool things with flexbox similar to what I'm asking. (e.g. Center div on wrapping (when it doesn't fit on the line))
Hoping to avoid using JS to detect a height change and then toggling a class. Thx.
.wrapper {
background: red;
width: 300px;
}
.wrapper2 {
background: blue;
margin-top: 30px;
text-align: center;
width: 150px;
}
button {
width: 100px;
}
<div class="wrapper">
<button>Btn #1</button>
<button>Btn #2</button>
</div>
<div class="wrapper2">
<button>Btn #1</button>
<button>Btn #2</button>
</div>
You can do it with flexbox and a media query:
jsFiddle
.wrapper {
display: flex;
background: red;
width: 500px;
}
button {
margin: 5px;
padding: 5px;
width: 100px;
}
#media ( max-width: 700px ) {
.wrapper { flex-direction: column; align-items: center; }
}
<div class="wrapper">
<button>Btn #1</button>
<button>Btn #2</button>
</div>
You can do this with a media query if the buttons have a fixed width.
https://jsfiddle.net/jaxon58/c0Lsrb7o/3/
.wrapper {
text-align: center;
}
button {
width: 200px;
display: inline-block;
}
#media(min-width: 420px) {
.wrapper {
text-align: left;
}
}
<div class="wrapper">
<button>Btn #1</button>
<button>Btn #2</button>
</div>
You will need to tweak the media query and the button widths to get them exact.
Let i have a several number of buttons
<button ng-repeat="a in graphdata" class="inline">
I need to align all these buttons in a line, and all buttons should be visible, and it should adjust its width when new button is getting added.
Button should be attached to each other.
You can use flexbox
$('.new').click(function() {
$('.element').append('<button class="inline">Button</button>');
});
.element {
display: flex;
}
button {
flex: 1;
background: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="new">Add new Button</button>
<div class="element">
<button class="inline">Button</button>
</div>
You should wrap your buttons with flex container.
<style>
.wrapper {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap; /* if you want buttons in several lines */
}
button {
min-width: 50px;
}
</style>
<div class="wrapper">
<button ng-repeat="a in graphdata" class="inline"></button>
</div>