I have the following setup:
<div class="container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
I wanted to use flex-box to place the button above the label, aligning them to the right of the parent element of the div, making the button the same width as the label.
.container{
display: flex;
flex-direction: column;
align-items: flex-end;
}
button{
appearance: none;
font-size: 2rem;
border: none;
background-color: yellow;
}
label{
font-family: sans-serif;
}
Works, as expected, but the button logically has it's own (in this case) smaller width.
If I set the container width to fit content and the align-items to stretch I get what I want width-wise but the container by default stays left. I could work around that with floats or positions, but that's not what I'm looking for. I also do not want to ad semantically unnecessary markup. I can (and probably will) use a grid, I just 'felt' that somehow this should be easily achieved with flex, I just couldn't find a way.
Here is a codePen: https://codepen.io/mdrei/pen/QWmMMeO
to play with, if needs be.
Thank you for reading: I'd like to clarify: I'm not interested in other solutions to the problem, I have several in mind. I'm interested to find out if what I wanted is doable with flex-box.
(Lets see if a moderator once again thinks he/she has to censor me because I say thank you)
I think you will achieve it using display grid.
.container {
display: grid;
grid-template-columns: max-content;
}
Then just add float right if you want it to align to the right
Using only flex-box, you can add another div to achieve what you want:
(Unnecessary markup is added, I know, but maybe that could help you)
<div class="container">
<div class="another-container">
<button id="print-button" title="print" type="button">🖨</button>
<label for="print-button">Print Me!</label>
</div>
</div>
.another-container {
display: flex;
flex-direction: column;
}
Here is a codePen : https://codepen.io/Deirok/pen/MWVvrdG
Have a great day :)
Related
I have a big html project due at work and I just have to add one final touch. I am trying to create a horizontal icon list on my page but have been running into issues. Here is a picture of EXACTLY what I need to create. please point me in the right direction or send over some code to try. Thanks
Here is a (very) basic implementation of how to use flexbox to create this three-column effect. Each individual cell will grow/shrink to equally fill the available width. Of course this needs some fine-tuning, but I hope it at least gives you a good starting point :)
.flex-container {
display: flex;
height: 100px;
width: 100%;
background-color: #00ff00;
justify-content: space-between; /* could also try with space-around */
}
.flex-child {
display: flex;
justify-content: center;
align-items: center;
flex-grow: 1;
background-color: #ff0000;
height: calc(100% - 20px); /* for demonstration purposes, subtracts top and bottom margin from height */
margin: 10px; /* for demonstration purposes */
}
<div class="flex-container">
<div class="flex-child">
Content here
</div>
<div class="flex-child">
Content here
</div>
<div class="flex-child">
Content here
</div>
</div>
What issues have you been running into?
It just a big flex container that contains 3 small flex containers.
In each small container, you will need 3 divs, the first div also flex, contain an icon and a text.
I'm working on a Navbar for my website and I noticed that if I had the links on the right using float: right they would reverse the order. I thought that I could reverse them back by using Flexbox's
flex-direction: reverse-row. This does not appear to work though?
Here's the code that should be responsible for re-reversing this effect:
.headerItem {
display: block;
padding-left: 7px;
padding-right: 7px;
float: right;
display: flex;
flex-direction: row-reverse;
}
Any hints/help?
float property is not part of flex. This will prevent it from doing what it is suppose to, because you are forcing it to float to right. Flex has its own way of doing that. its called justify-content - flex-start, flex-end, center, space-between and space-around. Try which one works for you.
Ok, so I found the answer. #jmag has provided some useful info, and some further Googling helped as well. The new navbar looks like this:
<div id="header">
<span id="headerLogo">XaafCode</span>
<div id="navbar">
Home
Portfolio
Contact me
</div>
</div>
In the CSS I have this now, which easily fixed it:
#navbar, #header { justify-content: space-between; }
I think this gif explains it very well:
https://gfycat.com/FormalReasonableHagfish
Context: I'm working on a digital catalog (I didn't start the project) for a company that sells TONS of products, sometimes they are small, sometimes big, sometimes wide, etc. They go on a specific area, lets say 400px x 400px.
I did horizontal alignment with flexbox and it works very well but on the vertical axis the products have static values (prod_1 top: 0px, prod_2: top 10px, prod_3 top: 20px...)
EDIT: My question/need is: I want to be able to align (responsively in the horizontal and vertical axis) 1 to 6 images inside 1 div but flexbox only let me choose one axis (flex-direction row or column), what can I do?
The code is something like this:
<div class='container'>
<img class='item_0'>
<img class='item_1'>
<img class='item_2'>
<img class='item_3'>
<img class='item_4'>
</div>
If posible the solution should be in CSS, if it can't be done, then it could be in Javascript or maybe changing a little bit the HTML.
This is because I only have access to CSS and JS. The index.html is generated automatically from a database by an application developed/controlled by another team and it's not that easy/quick to ask them for changes.
The best way I thought is with javascript but it may not be that easy, considering it's a big project and there's A LOT of code already written (not by me).
What do you guys think? I don't need the complete solution but some direction would be really appreciated, thank you!
Ok, so I am not 100% sure about what you need, but here's some code I made that does pretty much what your gif showed. You should be able to tweak it to your liking.
https://codepen.io/AlexWulkan/pen/wmmPvL
HTML:
<div class="container">
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
<div class="row">
<div class="box"></div>
</div>
</div>
CSS:
/* Outer container */
.container {
display: flex;
flex-direction: column;
background-color: #eee;
height: 400px;
width: 400px;
}
/* Each row of boxes */
.row {
display: flex;
align-items: center;
flex: 1;
padding: 0 1rem;
}
/* determines the position of the boxes in each row */
.row:first-child {
justify-content: flex-end;
}
.row:nth-child(2) {
justify-content: center;
}
.row:last-child {
justify-content: flex-start;
}
/* Each box */
.box {
background-color: #666;
height: 100px;
width: 100px;
}
Tell me if there's anything you have questions about and I'll try to answer. The code should be quite self-explanatory though. :)
My sidebar is getting pushed down instead of staying inline with my main class, you can view the issue more in my fiddle. (This is one of the first times I've not used bootstrap for a project in a very long time).
view my fiddle.
Instead of float, using flex is a better approach for responsive design.
Try putting your sidebar and main inside a div with display as flex and flex-wrap as wrap.
Here's an example-
.flexbox {
display: flex;
flex-wrap: wrap;
}
.latest-single {
width: 70%;
background-color: blue;
}
.sidebar {
width: 30%;
background-color: green;
}
<div class="flexbox">
<div class="latest-single">
This is our primary content
</div>
<div class="sidebar">
This is our sidebar content
</div>
</div>
You have to choose a way of how to display them. (block,flex,table)
i made it working by adding the display:flex on .container class.
jsfiddle https://jsfiddle.net/31rjm8qb/7/
You have a couple of problems here.
.main has width 100% so .sidebar can not fit
.sidebar is floated while .main is not, so they will not line up
I think it would be a good idea to try out display: flexbox and remove floats altogether.
Check out the following article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I want to achieve positioning like this (these are buttons but it doesn't matter):
|-------|-------|-------|-------|
| | | small | |
| | |-------| |
| big | big | small | big |
|-------|-------|-------|-------|
So I would call it positioning top to bottom, left to right - browser should put element below previous one if there is enough place, otherwise - put next to it. I don't know how many elements there will be, nor their width, etc. etc. - it has to be very flexible.
After short research I've found display: flex. It looks very promising (I don't need compatibility with different browsers - my plan is to do local app using html) but there is one problem.
Note: I don't want it to occupy 100% width - it should take only as much space as it needs. float: left on parent seems to be perfect.
In simple case: big button, big button, small button, big button - it works perfect. The problem appears when I add one more small button - it is displayed properly - under previous one BUT parent is bigger!
Here is code I got (and fiddle here, which shows those two cases: http://jsfiddle.net/h7SK7/):
<div class="container">
<button>Lorem</button>
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
div.container {
height:50px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
float:left;
}
button {
height:50px;
}
button.small {
height:20px;
}
Can anyone help me?
Try putting small buttons in a div. like this JSFiddle
<div class="container">
<button>Lorem</button>
<div class="box">
<button class="small">Dolor</button>
<button class="small">Sit</button>
</div>
</div>
.box{
width:70px;
}
Flexbox isn't about packing children as tight as possible. It is just for stacking children (flex-items) either horizontally or vertically. To get the desired layout, you must use multiple nested flexboxes. From CSS Flexible Box Layout Module
Abstract
...
Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
So, to get your desired layout, you must wrap the two small buttons into a flexbox and change the container to flex-direction: row
<div class="container">
<button>Lorem</button>
<div class="small">
<button>Dolor</button>
<button>Sit</button>
</div>
</div>
div.container {
display: flex;
flex-direction: row;
}
div.small {
display: flex;
flex-direction: column;
}
div.small button {
height:20px;
}
See modified JSFiddle
Update:
Maybe, CSS multi-column layouts achieve the needed layout. At least with your buttons, it seems to work
<div class="container">
<button>Lorem</button>
<button class="small">Dolor</button>
<button class="small">Sit</button>
<button>Amet</button>
</div>
.container {
-moz-column-width: 50px;
-webkit-column-width: 50px;
column-width: 50px;
}
button {
width: 60px;
height: 50px;
}
button.small {
height: 20px;
}
JSFiddle