I am having difficulty top aligning my 3 columns with multiple "rows". If I use the CSS property align-items: flex-end; I get the correct results, but elements are aligned at the bottom. If I try align-items: flex-start; nothing happens.
In the fiddle I would like the red block to move up so it is right bellow the Purple Heading.
Please see fiddle
Any help would be great!
I think you need to change html structure a little bit, if you want to make your task. I propose two versions to solve this issue. You can see it on the Fiddle.
Fiddle 1 - https://jsfiddle.net/AndrewKovalchuk/c6o4gdmh/
.categories {
display: flex;
flex-wrap: wrap;
}
.categories > ul {
margin: 0;
width: 33.33%;
box-sizing: border-box;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
Fiddle 2 - https://jsfiddle.net/AndrewKovalchuk/q6jt2d8h/
.categories {
display: flex;
flex-wrap: wrap;
}
.categories .category {
width: 33.33%;
display: flex;
flex-direction: column;
}
.category > ul {
margin: 0;
box-sizing: border-box;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}
set flex-direction: column and give it a fixed height.
height: 400px;
flex-direction: column;
Fiddle - https://jsfiddle.net/0eqLf321/40/
Related
I'm trying to put two flex containers next to each other using flexbox, taking this layout as reference (I want it to be like the first row here, with part of the image on the left inside a box and the other one on the right)
This is my code so far for the two containers:
.chaco-container {
border: $borde-textos;
background-color: #bda89c;
margin: 0;
padding: 1em;
width: 50%;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.plan-container {
background-color: white;
border: $borde-textos;
width: 50%;
display: inline-flex;
}
display: flex; needs to be applied on the parent container. Check out the below example snippet.
.flex-container {
display: flex;
}
.chaco-container {
width: 50%;
background-color: yellow;
}
.plan-container {
width: 50%;
background-color: skyblue;
}
<div class="flex-container">
<div class="chaco-container">...content</div>
<div class="plan-container">...content</div>
</div>
I think you might be facing gap between the two inline flex elements which is resulting to the second element going to the next line.
To fix this:
Use this as a reset:
*{
margin: 0;
padding: 0;
box-sizing:border-box;
}
2)Give negative margin to the plan(second) container:
margin-left:-4px;
(increase the number of negative pixels until both flexboxes are on the same row)
I am using axios router to get result from api, I need to show the response into a tile format like this
But am getting a results like this below.
My React and CSS code as below.
i need my 3rd child div be on the 2nd line, but the issue is the parent is exceeding the allowed max-width when child div has long length lines. and this disturbs another div next to parent div
render() {
return <div className="sdFoodScreenMain">
{ this.state.item.map(item =>
<div className="sdFoodBoxes" key={item.id}>
<p>{item.username}</p>
<p>{item.name}</p>
</div>
)}
</div>;
}
}
export default SdFoodScreen;
CSS code :
.sdFoodScreenMain{
float: left;
max-width: 55%;
}
.sdFoodBoxes{
display: flex;
flex-direction: column;
background-color: red;
max-width: 30%;
}
Try setting sdFoodScreenMain to have flex and flex-wrap.
.sdFoodScreenMain{
float: left;
max-width: 55%;
display: flex;
flex-wrap: wrap;
}
Edit: Here's how I would do it with flex. By changing max-wdith on the .sdFoodBoxes to flex-basis.
.sdFoodScreenMain{
float: left;
max-width: 55%;
display: flex;
flex-wrap: wrap;
}
.sdFoodBoxes{
display: flex;
flex-direction: column;
background-color: red;
flex-basis: 30%;
}
https://stackblitz.com/edit/react-cdghjn?file=style.css
Here's how I would do it with css grid:
They accomplish different things, so what you want in the end is up to you.
.sdFoodScreenMain{
float: left;
max-width: 55%;
display: grid;
grid-template-columns: 30% 30% 30%;
}
.sdFoodBoxes{
display: flex;
flex-direction: column;
background-color: red;
}
https://stackblitz.com/edit/react-nc88cy?file=style.css
So I'm having a problem centering items from a menu I'm making.
I have tried to put justify-content: center but that does not seem to work. Can someone help?
Right now the menu is stuck on the left corner. I want to center it.
.header2 {
background-color: rgb(190, 13, 13);
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 15px;
}
.menu {
display: flex;
}
.menu li {
margin-right: 15px;
}
.menu li a {
display: block;
padding: 10px;
}
<nav class="header2">
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contacts</li>
</ul>
</nav>
The nested flexbox (.menu) is set, by default, to flex-grow: 0, which means it won't occupy the full length of the parent.
Therefore, applying justify-content: center has no effect because there's no free space available in the container.
Adding flex-grow: 1 provides the extra space you need:
Add this to your code:
.menu {
display: flex;
flex: 1;
justify-content: center;
}
Also, since you're already using the semantically meaningful nav element, there's really no need for a nested list element. Try this simplified code instead:
.menu {
display: flex;
justify-content: center;
background-color: rgb(190, 13, 13);
}
.menu a {
padding: 25px 10px;
}
.menu a:hover {
background-color: orangered;
}
<nav class="menu">
Home
About
Products
Contacts
</nav>
Try:
.menu {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-grow: 1; /* or width: 100% */
}
if you want the elements evenly distributed by all the width.
And:
.menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
flex-grow: 1; /* or width: 100% */
}
otherwise.
Sorry, another flexbox related question :)
I have two flex elements :
A container (red) containing a centered div (yellow)
A footer (blue) with an undefined height
The red container has a flex-grow:1 attribute, forcing it to take the remaining space on the screen
The issue happens when the yellow element is bigger than the screen size. I would like my red container to grow based on its content. Any idea of how I could do that ?
HTML:
<div class="container">
<div class="content"></div>
</div>
<div class="footer"></div>
CSS:
body,
html {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.container {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
flex-shrink: 0;
height: 50px;
background-color: blue;
}
https://codepen.io/stepinsight/pen/roRVGQ
== EDIT ==
Andre helped me find the answer, thanks heaps !
The only thing you need to change in the code above is to replace height by min-height and the % by vh for the body/html tags 🎉
body,
html {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
Simply remove the height property on the body element and add height: 100% to html
* { box-sizing: border-box; }
html {
height: 100%
}
body {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
background: red;
}
.content {
background: yellow;
height: 2000px;
width: 100px;
}
.footer {
height: 50px;
background-color: blue;
}
Corrected: https://codepen.io/ferreirandre/pen/maoVvb
Feel free to play around with the height of .content
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....