I am trying to build a flexbox type container with a search and filters and buttons. I am having trouble getting the desired behaviour. The toolbar-container class is the main flex container, which holds search-bar and filter-group as the top-level flex-items. I am getting confused as to how approach setting up filter-group as a nested flex-container to which the desired behavior is to push the buttons to the end of the row (far right, equivalent to float: right) and give the filters the largest amount of space, wrapping below as the window resizes but maintaining the positions of search and buttons on either side. I have tried using the below css the seperate the fitlers from the buttons but there filters and buttons stay grouped together like this:
search-bar-filters-buttons---------------------------------------------------
Below is desired layout, with only the filters wrapping to the space below when the space decreases.
search-bar-filters-----------------------------------------------------buttons
<div class="toolbar-container">
<div class="search-bar"></div>
<div class="filter-group">
<div class="filters"></div>
<div class="buttons"></div>
</div>
</div>
.toolbar-container {
display: flex;
}
.search {
}
.filter-group {
display: flex;
justify-content: space-between;
}
.filters {
flex-wrap: wrap;
}
.buttons {
}
You need to add flex: 1 for you .filter-group to take all remaining space. Demo:
.toolbar-container {
display: flex;
}
.filter-group {
display: flex;
flex: 1; /* new */
justify-content: space-between;
}
.filters {
flex-wrap: wrap;
}
<div class="toolbar-container">
<div class="search-bar">Search bar</div>
<div class="filter-group">
<div class="filters">Filters</div>
<div class="buttons">Buttons</div>
</div>
</div>
Related
My understanding of flex is that this;
<div class="flex-container">
<img src="image-1">
<img src="image-2">
...
<img src ="image-n">
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-container img {
flex-shrink: 1;
}
</style>
with random number of random sized images should produce a block of images of width 100% of its parent with the images reduced in size proportionally to fit. I don't want to wrap the items.
The result of the above is either an overflow of the container or distorted images with varying results depending on setting max- or min-height styles on parent or children.
My understanding is obviously wrong. But why?
I have added the snippet below, in Chrome the images fit the box but are distorted, in Firefox they spill out of the box.
Setting the images to display: block is not sufficient. They need to be enclosed.
Thanks to Adriano for the comment suggestion.
<div class="flex-container">
<div>
<img src="image-1">
</div>
<div>
<img src="image-2">
</div>
...
<div>
<img src ="image-n">
</div>
</div>
<style>
.flex-container {
display: flex;
justify-content: space-between;
}
.flex-container div {
flex-shrink: 1;
}
.flex-container div img {
width: 100%;
height: auto;
}
</style>
If you want your image to keep ratio, add align-items: flex-start; to your container.
"The default for the css "align-items" property is "stretch" which is what is causing your images to be stretched to its full original height. Setting the css "align-items" property to "flex-start" fixes your issue."
Or you set each image into a container (with display:block;).
if you want your image to break and go to the next line just add flex-wrap:wrap; to your container.
.flex-container {
display: flex;
justify-content: space-between;
/* ADDED */
align-items: flex-start;
/*flex-wrap:wrap;*/
}
.flex-container img {
flex-shrink: 1;
}
<div class="flex-container">
<img src="https://dummyimage.com/600x400/000/fff">
<img src="https://dummyimage.com/200x600/e31da8/000">
...
<img src ="https://dummyimage.com/60x40/000/fff">
</div>
I am trying to replicate stackoverflow-like design and ran into problem.
<div class="flex-grow-0 pd-around-m"> # line 1
<div class="flex-col fill-row mr-around-s"> # line 2
<div class="flex-row fill-row"> # line 3
<div class="flex-col justify-center mr-around-m"> # line 4
//Buttons
</div>
<span>
//Long Text!!
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
.fill-row {
width: 100%
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.mr-around-m {
margin: 1rem;
}
.justify-center {
justify-content: center;
}
When I enter long text in <span>, <div> in line 2, line 3 goes out of div box in line 1.
I tried adding white-space: pre-line to div in line 2 and directly at span but still text goes out of the box.
How can I keep the text inside parent div?
navigation bar on the left has property width:20% but gets squashed. Is this because of the textbox problem I asked above?
EDIT
https://jsfiddle.net/pzcu2yjn/
Here's a replication of my problem. if you make the text in span short enough, navbar and menu will have some empty space in the left maintaining 20% of the screen. however, if you leave the long text as it is, it gets squashed and 20% gets ignored
Few things:
On using flex it is good to provide width for left and right container since container will not know what it should when content increases.
Once you have the width assigned to the right container that is when you can use wrap functionality so the wrap works only for right container and it doesn't have no impact on less container. overflow-break-word;
NOTE:
I have removed unwanted code from the code, you can put it back it has no impact if those are needed.
.flex-row {
display: flex;
width: 100%;
}
.navbar {
display: flex;
flex-direction: column;
justify-content: flex-start;
border-right: 0.05rem solid var(--main-border-color);
align-items: flex-end;
width: 20%;
border: 1px solid red;
}
.pd-around-m {
width: 80%;
border: 1px solid blue;
display: inline-block;
overflow-wrap: break-word;
}
<div class="flex-row">
<div class="navbar">
<div>
menu1
</div>
</div>
<div class="flex-grow-0 pd-around-m">
<div class="flex-col fill-row mr-around-s">
<div class="fill-row">
<span>
AaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaaAaaaaaaaaaaaaaaaaaa
</span>
</div>
<div class="answer-bottom"></div>
</div>
</div>
</div>
You can add overflow: hidden; to prevent the text from going outside of your div.
There's a very similar question with a precise answer:
<span> element going outside of <div> element
I am trying to make something similar to this:
Where the 'Project Title' is centered within the total height of A [The image].
I am setting a div above project-description using flex:
.headline {
display: flex;
align-items: center;
justify-content: center;
}
<div class="column headline row__twenty">
<div class="project-description">
<h2>
Title here
</h2>
<p>
Some content for the boxes here
</p>
</div>
</div>
However I can not see why the project-description div is not veritcally aligning the item successfully.
See this on jsFiddle.
Move your flex-box definitions to the parent .row and it will work (parent of the .row__seventyand .headline).
Something like:
.project-wrap > article > .row {
display: flex;
align-items: center;
justify-content: center;
}
.project-wrap > article:nth-of-type(even) > .row {
flex-direction: row-reverse;
}
I'm having big trouble centering two elements in a flex container. What I would like to do is to center one element at the top of the flex container (using flex-start ?) and one element at the bottom of the container (flex-end ?). I have tried several options, but was unable to get what I want. Most of my tries ended in one element in the top left half of the container, and the other one in the bottom right one.....
Please have a look at: jsfiddle
<!DOCTYPE html>
<body>
<div class="flexcontainer1">
<div class="txt1"> Some text here </div>
</div>
<div class="flexcontainer2">
<div class="row">
<div class="txt2"> Some more text </div>
<div class="txt2"> Even more text </div>
</div>
</div>
</body>
Is this at all possible ?
Furthermore: I'm telling the elements to be centered, but it looks like the second line (Even more text) is not centered at all. Or is this just optical ?
Thanks,
Hans
The .row container between the flex container and the flex items is annoying, so get rid of it.
And then,
.flexcontainer1, .flexcontainer2 {
display: flex; /* Magic begins */
flex-direction: column; /* Vertical layout */
align-items: center; /* Center horizontally */
}
.flexcontainer1 { justify-content: space-around; }
.flexcontainer2 { justify-content: space-between; }
.flexcontainer1, .flexcontainer2 {
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid black;
}
.flexcontainer1 {
justify-content: space-around;
height: 250px;
}
.flexcontainer2 {
justify-content: space-between;
height: 150px;
}
.txt1 {
font-size: 3.0vw;
}
.txt2 {
font-size: 2.2vw;
}
<div class="flexcontainer1">
<div class="txt1">Some text here</div>
</div>
<div class="flexcontainer2">
<div class="txt2">Some more text</div>
<div class="txt2">Even more text</div>
</div>
Using a two-column flexbox layout, how can different-sized children be made to fill all available space, instead of all children having the height of the tallest child of the row?
I set up a demo on jsbin that illustrates the problem. I'd like for all the children to be the size of their wrapped contents.
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
}
.cell {
width: 300px;
flex; 1 auto;
}
<div id="container">
<div class="cell">
Cells with arbitrarily long content.</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
<div class="cell">
</div>
</div>
</body>
</html>
This is how Flexbox rows are expected to behave. Flexbox is not meant to recreate Masonry with pure CSS: items in one row cannot occupy space allocated for a preceding/following row (same goes for columns if you're using column orientation). You can use align-items to prevent them from stretching, but that's about it:
http://cssdeck.com/labs/9s9rhrhl
#container {
width: 800px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.cell {
width: 300px;
flex: 1 auto;
padding: 10px;
border: 1px solid red;
}
Otherwise, you should be using the column orientation or the multi-column module (see this SO answer: https://stackoverflow.com/a/20862961/1652962)