I have the following scenario:
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-wrap:wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
padding: 5px;
width: 150px;
height: 75px;
margin-top: 10px;
line-height: 75px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
http://codepen.io/HugoGiraudel/pen/LklCv
I want one thing changed:
The left and right divs should not have a space between the parent div and itself.
When I do justify-content: space-between, that problem is solved but then the divs are no longer centered.
Related
I have to make a tag cloud. It should be looking like it shown in the picture below:
The red box here is the "show more" button which should be always sticked to the top right corner. Amount of tags (the tags are blue boxes here) is unknown, so as amount of rows.
I tried to do it with grid, but it seems it's impossible to make a non-rectangular cell. I tried to make the wrapper for blue boxes by the shape attribute, but it seems it's not an option as well.
Don't use grid for that because you don't really want a grid. Instead try flex with row-reverse - it will work if you don't care about the order of the tags (because they will be sorted in reversed horizontal order).
ul {
list-style:none;
}
li {
display: inline-block;
padding: 3px 10px;
}
.show-more,
.tag {
flex-basis: auto;
flex-grow: 1;
margin: 0 10px 10px;
text-align: center;
}
.show-more {
background-color: tomato;
color: white;
}
.tag {
background-color: beige;
color: black;
}
.tag:nth-child(2) { width: 100px; }
.tag:nth-child(4) { width: 120px; }
.tag:nth-child(6) { width: 75px; }
.container {
max-width: 400px;
}
.tag-list {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
}
<div class="container">
<ul class="tag-list">
<li class="show-more">Show more</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
</ul>
</div>
I am trying to display these images horizontally in a flex box with justify-content: space-around.
It does not work, any ideas?
The only way that I was able to display it in a spaced manner was with padding.
Why doesn't justify-content work?
h3 {
font-weight: lighter;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 10px 0;
font-family: Proxima Nova;
letter-spacing: 1.92px;
color: #FFFFFF;
opacity: 0.7;
}
.flex-container {
flex-direction: column;
display: flex;
width: 100vw;
height: auto;
}
.trusted-by-container {
display: flex;
flex-flow: column;
align-items: center;
top: 781px;
}
<div class="trusted-by-container">
<div class=t itle>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting-companies-container">
<li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
<li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
<li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
</ul>
</div>
Flex items will take the width of their content, leaving no extra space for keyword alignment properties (such as justify-content) to work.
Create some extra space; add width: 100%. (Also, close your img elements.)
h3 {
font-weight: lighter;
font-size: 16px;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 10px 0;
font-family: Proxima Nova;
letter-spacing: 1.92px;
color: #FFFFFF;
opacity: 0.7;
}
.flex-container {
flex-direction: column;
display: flex;
width: 100vw;
height: auto;
}
.trusted-by-container {
display: flex;
flex-flow: column;
align-items: center;
top: 781px;
}
.trusting-companies-container {
width: 100%; /* new */
display: flex;
justify-content: space-around;
}
<div class="trusted-by-container">
<div class=t itle>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting-companies-container">
<li class="company-item"><img src="./images/monday.svg" alt="monday"></li>
<li class="company-item"><img src="./images/intel.svg" alt="intel"></li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson"></li>
<li class="company-item"><img src="./images/handy.svg" alt="handy"></li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport"></li>
</ul>
</div>
.companies-evenly {
justify-content: space-evenly;
}
.trusting {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
<div class="trusted-by-container">
<div class=title>
<h3>TRUSTED BY</h3>
</div>
<ul class="trusting companies-evenly">
<li class="company-item"><img src="./images/monday.svg" alt="monday" </li>
<li class="company-item"><img src="./images/intel.svg" alt="intel" </li>
<li class="company-item"><img src="./images/johnson.svg" alt="johnson" </li>
<li class="company-item"><img src="./images/handy.svg" alt="handy" </li>
<li class="company-item"><img src="./images/flexport.svg" alt="flexport" </li>
</ul>
</div>
I am attempting to list a series of same sized elements. I want these elements to display with even spacing on the right and left (vertically centered?), and evenly spaced between each other. The biggest problem is that the list needs to be able to adjust to screen size changes and number of element changes. As such the width and elements per line need to update as necessary. The bottom row should also ideally align with those above it.
This is the closest that I have been able to get so far.
HTML
<div class="outer">
<div class="inner">
</div>
</div>
... repeated as any times as there are blocks.
<div class="outer">
<div class="inner">
</div>
</div>
CSS
body {
text-align: justify;
margin:0;
width: auto;
}
.outer {
background:blue;
width: 100px;
height: 90px;
display: inline-block;
text-align: center;
}
.inner {
background:red;
width: 90px;
height: 90px;
display: inline-block;
text-align: center;
}
JSFiddle
Sounds like a job for flexbox. One of these work for you? https://codepen.io/anon/pen/VEpbjv
HTML
<ul class="flex-container space-between">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-around">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
<ul class="flex-container space-evenly">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
}
.flex-start {
justify-content: flex-start;
}
.flex-end {
justify-content: flex-end;
}
.flex-end li {
background: gold;
}
.center {
justify-content: center;
}
.center li {
background: deepskyblue;
}
.space-between {
justify-content: space-between;
}
.space-between li {
background: lightgreen;
}
.space-around {
justify-content: space-around;
}
.space-around li {
background: hotpink;
}
.space-evenly {
justify-content: space-evenly;
}
.space-evenly li {
background: #bada55;
}
.flex-item {
background: tomato;
padding: 5px;
width: 60px;
height: 50px;
margin: 5px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
}
I am trying to do a vertical layout with columns that wrap (I have a max height) but I can't center the columns horizontally without also setting a width (which I don't want to). I'm using flexbox and I thought using center on both justify-content and align-items would be enough but it isn't. I would like to have all the vertical columns centered in the parent, how could I achieve that without setting a width to the parent?
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
max-height: 400px;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
height: 50px;
margin-top: 10px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
For that you can use align-content: center on flex-container. With this you define how items are distributed along cross-axis which in this case is x because you are using flex-direction: column so y is main-axis and x is cross-axis.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-flow: column wrap;
justify-content: center;
max-height: 400px;
border: 1px solid black;
align-content: center;
}
.flex-item {
background: tomato;
padding: 5px;
width: 50px;
height: 50px;
margin-top: 10px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 1em;
text-align: center;
}
<ul class="flex-container">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
</ul>
This question already has answers here:
How can you use flexbox to vertically center text in a fixed-height div without overflowing above?
(3 answers)
Closed 7 years ago.
I am trying to center a div vertically, using flexbox. I have li's with a height of height:100px. I then tried vertically centering it like this: align-items: center, and the top part gets cut off.
How can I vertically center something using Flexbox without the top part getting cut off?
Here's the JSFiddle, and here's the code snippet:
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
#flexWrapper {
display: flex;
justify-content: center;
background-color: aqua;
height: 100%;
align-items: center;
/* This statement makes the problem */
overflow: auto;
}
#flexContainer {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
}
li {
background-color: tomato;
border: 1px solid black;
box-sizing: border-box;
flex-basis: calc(100%/3);
height: 100px;
}
<div id="flexWrapper">
<ul id="flexContainer">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
</ul>
</div>
Nothing is wrong with your Flex-Fu, it's what's outside of your flexboxes that are giving you undesirable results. Take a look at the Fiddle and/or snippet below:
Fiddle
html {
box-sizing: border-box;
font: 400 16px/1.5 'Source Code Pro';
height: 100vh;
width: 100vw;
}
*,
*:before,
*:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 solid transparent;
}
#flexWrapper {
display: flex;
justify-content: center;
background-color: aqua;
height: 100%;
align-items: center;
/* This statement makes the problem */
overflow: auto;
}
#flexContainer {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
align-content: flex-start;
}
li {
background-color: tomato;
border: 1px solid black;
box-sizing: border-box;
flex-basis: calc(100%/3);
height: 100px;
}
<div id="flexWrapper">
<ul id="flexContainer">
<li class="flex-item">1</li>
<li class="flex-item">2</li>
<li class="flex-item">3</li>
<li class="flex-item">4</li>
<li class="flex-item">5</li>
<li class="flex-item">6</li>
<li class="flex-item">7</li>
<li class="flex-item">8</li>
<li class="flex-item">9</li>
<li class="flex-item">10</li>
<li class="flex-item">11</li>
<li class="flex-item">12</li>
<li class="flex-item">13</li>
<li class="flex-item">14</li>
<li class="flex-item">15</li>
<li class="flex-item">16</li>
<li class="flex-item">17</li>
<li class="flex-item">18</li>
<li class="flex-item">19</li>
<li class="flex-item">20</li>
<li class="flex-item">21</li>
<li class="flex-item">22</li>
<li class="flex-item">23</li>
<li class="flex-item">24</li>
</ul>
</div>
Relevant Code
html {
box-sizing: border-box;
font: 400 16px/1.5 'Source Code Pro';
height: 100vh;
width: 100vw;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
border: 0 solid transparent;
}
I reset the CSS ✲ then applied height: 100vh and width: 100vw to <html> so that every inch of your layout is viewable--no unsightly cutoff. Further details on vh and vw can found here.
✲ All CSS reset rulsets are optional, the only properties required to succeed are vh and vw.
Is this one acceptable?
#flexWrapper {
justify-content: center;
background-color: aqua;
height: 100%;
width:70%;
margin:0 auto;
}
http://codepen.io/damianocel/pen/gavEzv
To have it responsive you will have to use % values instead of px.
Really depends how you want the layout to look, always 3 rows and 8 columns?