I'm very new to CSS, and I'm struggling on positioning a flex item (DownloadButton) the way I want it too.
I want to position a flex item a certain way, but my googling skills are failing me.
The current state looks like this:
Icon DownloadButton DeleteButton
What I want is this:
Icon DownloadButton DeleteButton
I thought I could use align-items, but that's for the cross axis. Rather than even spacing, like the normal flex behavior, I want my DownloadButton hugging the DeleteButton at the end. However, my Googling skills have failed me. Help would be greatly appreciated, thanks guys!
I would align the items to the end (for preference) and then adjust the first one.
As pointed out in the comments the end alignment is not necessary as the effect is caused by the margin adjustment.
.parent {
width: 80%;
margin: 1em auto;
border: 1px solid grey;
display: flex;
justify-content: flex-end;
padding: .5em;
}
button:first-child {
margin-right: auto;
}
<div class="parent">
<button>Icon</button>
<button>Download</button>
<button>Delete</button>
</div>
Add these styles to the container:
#flex-container { /*Select Your Flex Container*/
display: flex;
flex-direction: row;
justify-content: space-between;
}
Add these styles for the flexible items:
.flexible-items { /*Select The Children Of The Flex Container*/
flex-grow: 0; /*This Is Default*/
}
#Icon {
flex-grow: 1;
}
If you want some space between the other two flexible items, you can achieve this by multiple methods, 1 being to add some margin and padding styles for their sides.
Related
I'm really new to html and css, so this is my first full attempt at making a nav bar, items in nav bar stuck to the top of the page, please tell me where things went wrong
https://codepen.io/galia-s/pen/GRojmwV
.flex-content {
display: flex;
margin: auto 3.25rem;
align-items: center;
}
Instead of align-content, you might be looking at align-items, depending on what you are trying to achieve. I assume you want to center these items.
So your .flex-content class could look like this:
.flex-content {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 5rem; //set height here instead of header
}
Hope it helps.
You posted way too little information for a reliable answer, but anyway: To get flex-items to stack vertically, you have to add flex-direction: column; to the flex container.
I am using the Vali Admin theme and I am trying to push the last list item in the left sidebar to the bottom.
I have barely used flexbox before so I am not familiar with it at all, but I changed the menu to display: flex and then followed this answer to try to push the last item to the bottom. I am trying to do exactly what the person in that question if after.
These are my modifications to the theme:
.app-menu {
#extend .app-menu;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
li:last-of-type {
margin-top: auto;
}
}
Working fiddle.
I think the problem is that the menu isn't using as much height as it can.
I would gladly include a working snippet but for the love of my I couldn't figure out how to create a jsfiddle. It doesn't allow local files and it would block my gist. Same with Codepen.
Add the following on .app-sidebar:
display: flex; // make sidebar a flexbox
flex-direction: column; // so it will align column direction
We do the thing above so we can apply flex related styling on the child.
This will make the parent or sidebar a flexbox, then add the following on .app-menu
flex: 1; // this will take all the remaining space on the sidebar
and remove padding-bottom on .app-menu so the last item will stay in the bottom without the padding.
try this
.app-menu {
margin-bottom: 0;
padding-bottom: 40px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start;
height: 100%;
if last item need to be displayed at the bottom of the page. try by setting height:100% to the ul
It's right to do as it described in link you've attached.
But you didn't set 100% height for your ul.
Setting height: 100%; to .app-menu class solves your problem.
Here is the working example based on your code:
https://jsfiddle.net/zewx18ps/1/
I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.
Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.
The snippet below will hopefully clarify what I'm struggling with.
Let me know if you need me to clarify further. Thanks!
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items: center;
justify-content: center;
}
.row {
flex: 0 auto;
height: 100px;
margin: 0;
}
#lighticon {
padding-bottom: 30px;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width: 480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {}
}
#media only screen and (min-width: 760px) {
#qwrapper {
justify-content: space-between;
margin: 10px;
}
#lighticon {
position: relative;
margin-left: 100px;
}
}
<div id="qwrapper">
<h3 id="michelle" class="row">"She always thinks of her clients."
<br>
</h3>
<img src="https://cdn4.iconfinder.com/data/icons/black-icon-social-media/512/099310-feedburner-logo.png" class="row" alt="" id="lighticon" />
<h3 id="jerry" class="row">"Very smart, creative person, problem solver."
<br>
</h3>
</div>
The justify-content property uses the available space on the line to position flex items.
With justify-content: space-between, all available space is placed between the first and last items, pushing both items to opposite edges of the container.
You wrote:
I was wondering how to justify how much space is allowed in justify-content: space-between for flexbox.
With space-between in row-direction, you would have to control the width of the flex container. So if you want there to be less space between flex items, then you would need to shorten the width of the container.
Or you could use justify-content: space-around.
However, these solutions are suboptimal.
The right way to go about this would be to use margins.
You wrote:
Currently, my items are spaced but they have way too much space between them I want just a little space between them so they can settle somewhere in the middle in a row.
Use justify-content: center then use margins to space them apart.
My solution was :
put dummy empty divs in between with a max-height specified
change space-between to flex-start
set the content blocks to nogrow
set the dummy divs to grow
Then the spaces grow up to a max specified.
The approach with using margins is not a universal solution if you want space-between, because it would set a margin on all the flex-elements, also on the first and last elements on a line or column. Using :first-child / :last-child/ :nth-child() selector doesn't help when flex-wrap: wrap is set, because you can never tell which elements will be first and last on a wrapped line or column.
A selector like :wrapped would be helpful, but sadly it doesn't exist.
So my conclusion is that when you really want to unleash the flexibility and responsiveness of the flexbox, you can't control the margins… Missed opportunity of the spec I'd say.
I find myself adding right margin to all the boxes (in this case three)
.three {
margin-right: 2%
}
and then getting rid of it so the last box aligns right
.three:nth-child(3) {
margin-right: 0%;
}
but every time I do this I think "there has to be a better way, something baked into flex-box...this works but it seems like a workaround?
I am developing a forum theme at the moment, and am trying to figure out how to do the last bits, the posts. Example of what I'd like to make:
So the key things to keep in mind here is how User Info and Post Content have different colors, as well as the Post Description in the grid is in the same column as the Post Content.
Using a simple div setup doesn't work, as I need the User Info height to control the height of Post Content and vice versa. Having a wrapper element with the background color of User Info would work, but only if the Post Content is taller than User Info.
I am really just looking for brainstorming here. What would be the best way to go about doing this?
I created a draft of what the final result should look like here:
It should be fine with the code you have provided altered slightly, but I have some questions.
1) You commented the description has a set height? Does it need to? Worst case scenario I just adjust this height in media queries.
2) I probably need to have some columns within Post description too. As you see in my draft there's a left container with the timestamp (let's call that desc-meta) of the post, and to the right there's a permalink with ID (let's call that desc-ID). There's also a set of post options (Edit, report etc.) between the two (let's call that desc-edit), but aligned to the right side of the description. From my brief understanding of flex I can't figure out how to always keep the desc-meta and desc-ID on the same row, while desc-meta can be moved down if needed on smaller screens.
This layout can be achieved with CSS flexbox.
For both columns to have equal height we can use the align-items property, which controls space distribution among flex items on the cross-axis.
The default value is stretch, which enables items to extend the full length of the container.
.container-outer { align-items: stretch; }
We can also use the flex-grow property to control how free space is distributed among flex items in the main-axis.
.post-content { flex-grow: 1; }
The code below renders this (with borders only for demo purposes):
.container-outer {
display: flex;
align-items: stretch; /* tells boxes to stretch vertically (default value) */
width: 75%;
min-height: 250px;
border: 5px solid mistyrose;
}
.user-info {
display: flex; /* nested flexbox, to enable flex properties */
flex-direction: column;
justify-content: center;
align-items: center;
width: 25%;
border: 3px solid red;
font-family: verdana;
font-weight: bold;
font-size: 2em;
color: red;
box-sizing: border-box;
overflow: auto;
}
.container-inner {
display: flex; /* nested flexbox */
flex-direction: column;
width: 100%;
border: 3px dashed black;
overflow: auto;
}
.post-description {
display: flex; /* nested flexbox */
justify-content: center;
align-items: center;
height: 50px; /* fixed height */
border: 3px solid green;
font-family: verdana;
font-weight: bold;
font-size: 1.5em;
color: green;
box-sizing: border-box;
overflow: auto;
}
.post-content {
display: flex; /* nested flexbox */
justify-content: center;
align-items: center;
flex-grow: 1; /* box takes all available space (stretch, basically) */
border: 3px solid blue;
font-family: verdana;
font-weight: bold;
font-size: 2em;
color: blue;
box-sizing: border-box;
overflow: auto;
}
<article class="container-outer">
<section class="user-info">USER<br>INFO</section>
<div class="container-inner">
<section class="post-description">POST DESCRIPTION</section>
<section class="post-content">POST CONTENT</section>
</div><!-- end .container-inner -->
</article><!-- end .container-outer -->
jsFiddle
Regardless of how much or how little content is placed in USER INFO or POST CONTENT, both columns will remain equal height.
The container is given a minimum height (min-height: 250px;) to ensure it doesn't get too small if there is no content in either box.
flex-grow is only applied to POST CONTENT because USER INFO already expands full height by inheriting height from the container, and POST DESCRIPTION has a fixed height, so it won't expand.
Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.
My initial thoughts would be to do something like this:
<div class="one">
</div>
<div class="container">
<div class="two">
</div>
<div class="three">
</div>
</div>
And then give the left div a display of inline-block and the right container of inline-block, and the inner divs remain block.
.one {
display: inline-block;
}
.container {
display: inline-block;
}
I would use display: table with the corresponding rows/cells. See this http://jsfiddle.net/ycsmo9vg/ it should be easy extend this for your needs
notice how in the second cell, I have 2 divs, 1 has class row and the second div is plain (no class needed). This is up to you. Since a div is a block level element it will automatically take a row. Though I'd say keep it consistent and have a class of row wherever you have a row
I have this list ol with items li which are styled as follows:
ol {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 400px;
}
li {
width: 120px;
height: 120px;
}
DEMO
As you can see 3 items fit on one row. Because I'm using justify-content: space-between the first row looks exactly as I want it. However, the second row does not (because it has only two items). I want them to be positioned as if there was a 6th element (no gap between them and left aligned)
Is there anyway I can achieve this with flex box, or should I introduce an invisible 6th element ?
There is no way of achieving what you are asking by using display:flex; and justify-content:space-between;
See here more details: W3C:Axis Alignment: the ‘justify-content’ property
I would recommend using justify-content:center; or justify-content:flex-start; with margins.