I've made a table-like flex structure, that looks pretty nice and has adaptive number of cells, but when last row isn't full - it stretches remaining cells to full size, which looks unshapely.
https://jsfiddle.net/zzmaster/6uw4gm3t/3/
(you need to enlarge results area to maximum in order to see this)
Logically, justify-content: flex-start; should fix this, but it doesn't.
Is there any way to turn remained cells back to their's place?
You can fix with remove flex: 1 1 0px CSS style. Replace below code with your current code.
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
}
change your css like below!
ul.text {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
ul.text li {
min-width: 300px;
display: inline-flex;
flex: 1 1 0px;
justify-content: center;
align-items: center;
resize: both;
}
Related
I use flexbox to deal with horizontal and vertical alignment of a text in a div.
I want to use mark tag to highlight searched text in it but the behaviour is not what i expect : the text in the mark tag is detached from the word it belongs to.
Here is the sample code and picture :
<div class="cell">Bouclage de ceinture conducteur et p<mark>ass</mark>agers</div>
.cell {
display: flex;
align-items: center;
justify-content: left;
background-color: #ddd;
width: 15em;
}
Result and expected
I want to keep flex display, do you have any idea how to solve this issue ? Thanks for your advices.
align-items should be 'start' instead of 'left' and add flex-wrap: wrap;
.cell {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: start;
background-color: #ddd;
width: 15em;
}
Stackblitz link for working solution
I'm using flex box to make a layout for my products list but when I try to set justify-content to be space-between it works well on 4 items scenario but for less items (2 or 3) the space between them grows so how I set the space between items to be the same regardless the number of items in the row?
.productsContainer {
background-color: $color_1;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.product {
flex-basis: 23%;
border: 1px solid $color_2;
display: flex;
flex-direction: column;
padding: 10px 15px;
margin-bottom: 20px;
}
Screenshot
justify-content: space-between;
will divide the remaining container space into equal width chunks between your elements, you can not set the spacing.
I would recommend trying the grid layout for this kind of card placement.
Something like this should do it:
.productsContainer {
background-color: $color_1;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 15px;
}
Change to:
justify-content: center;
and add gap property:
gap: 10px;
and play with the gap.
Im working on an accordion drop down and using flex box to align everything on the page. However, I am running into an issue where item are being centered vertically, even though I want them to stay on top.
You can see what I mean in this code pen, I'd like the items to stay on top and only push down one side of the dropdown where clicked.
https://codepen.io/maciekmat/pen/QWLqred
.loh-faq-container{
display: flex;
margin: 2em 0 4em;
align-items: flex-start;
align-self: flex-start;
}
.loh-faq-wrap{
margin: auto;
max-width: 45%;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: flex-start;
}
To my understanding, align-items: flex-start; should work, especially when applying to the child flexbox, but I could very well be wrong. Whats going on here?
It seems to be your margin: auto; on .loh-faq-wrap that is doing this.
Change from:
.loh-faq-wrap {
margin: auto;
}
To this:
.loh-faq-wrap {
margin: 0 auto;
}
Auto margins can be used for centering things. So I would recommend reading up on that.
I'm using flexbox for a layout. My constraint is that the image must be situated at the middle.
I've made a minimal markup that reproduces the issue: http://codepen.io/anon/pen/xwNomN
It works perfectly well in all browsers EXCEPT on IE 10 and 11, where (as shown in the CodePen) a big amount of empty space is added at the top and bottom of the image.
.collection__list {
display: flex;
flex-wrap: wrap;
}
.product-item {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.product-item__figure {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex: 1 0 auto;
}
.product-item__figure > a {
display: flex;
position: relative;
flex: 1;
}
.product-item__image-wrapper {
position: relative;
width: 100%;
}
.product-item__image {
display: block;
margin: 0 auto;
max-width: 100%;
}
I've tried a lot of fixes, played with flex-shrink, flex-grow... but after 1 whole day lost, I'd love to know what I'm doing wrong.
Thanks
Oh... I've found it by chance. Adding overflow: hidden to product-item__figure made the trick....
I am working on a menu bar that has all of its buttons distributed evenly in the center of the nav element (the container). I need this layout to look good on most devices, regardless of its size. The problem is, at one of the tablet sizes I am testing, only one of the buttons goes to the next line, leaving an undesirable look. Is there any way using css to have all items distributed on all lines being used evenly?
Here is the nav's style block:
nav {
display: -ms-flex;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
-moz-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-ms-justify-content: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100px;
background-color: #000;
}