I am trying to evenly space out inline-elements inside a 90% width container. I already looked for a solution and tried different things with zero success.
The most promising idea was the text-align: justify with and 100% width child
Here is my code:
<div id="stage">
<div class="thumb">
<img src="generic_source" height="200px"/>
</div>
<div class="thumb">
<img src="generic_source" height="200px"/>
</div>
.
.
.
.
</div>
CSS:
#stage {
width: 90%;
margin: 50px auto;
text-align: justify;
border: 1px solid black;
}
#stage::after {
display:inline-block;
width:100%;
content:'';
}
.thumb {
height: 200px;
display: inline-block;
margin: 10px;
width: 300px;
text-align: center;
padding: 2px;
}
Everything looks great except the space left on the right. Zooming in and out makes it more or less obvious, but obvious nonetheless
I have 100+ thumbs that i would like to see symmetrically arranged
Thank you
EDIT:
Here you can see the example. Notice the space left to the right side border when scaling the page
I think the only way to do it in css is by using flexbox. You'll need to change #stage selector:
#stage{
width: 90%;
margin: 50px auto;
text-align: justify;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
if you can't use it (need to support older browsers) you can try a js solution like freewall
Related
I want to display some divs containing an image and two divs with text in it in a flexbox container with a fixed height.
These divs represent tracks with an album cover, the song name and the artists name.
Like this:
<div class="flex-container">
<div class="track">
<img class="track--image" src="http://lorempixel.com/400/400/">
<div class="track--artist-name">Artist</div>
<div class="track--track-name">Song</div>
</div>
<div class="track">
.
.
.
</div>
The CSS:
.flex-container {
display: flex;
width: 100%;
height: 100px;
background-color: lightblue;
}
.track {
border: 1px solid black;
text-align: center;
max-width: 9rem;
color: black;
}
.track--image {
width: 100%;
border-radius: 50%;
}
.track--name,
.track--artist-name {
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
The problem is that the image has a width of 100% to fit into its parent div. But this also implies that it overflows its parent. And also the two divs within the track div get pushed outside its parents.
How do I prevent the image from beeing too big for its parent div so that either the image and the two divs fit inside the parent?
I also prepared a codepen to better describe the problem: https://codepen.io/anon/pen/YBQGRb
EDIT:
My expectation looks something like this:
As you can see the light grey container is my flex-container within I want to have my track divs. The image and those two texts should fit within even if the height of the flex-container changes.
If you edit your image class like this it works.
.track {
border: 1px solid black;
text-align: center;
width: 9rem;
color: black;
.track--image {
border-radius: 50%;
height:100%;
}
}
https://codepen.io/anon/pen/XOadGO
Does switching height to auto in your .flex-container give you the desired outcome,
.flex-container {
display: flex;
width: 100%;
height: auto;
background-color: lightblue;
}
After comment
All I've done below is add a small amount of padding to the track container to get the image off the top border and forced the image to fit within the fluid-container by control the width.
.track .track--image {
width: 35%;
height: auto;
border-radius: 50%;
}
.track {
border: 1px solid black;
padding: 5px;
text-align: center;
max-width: 9rem;
color: black;
}
I fixed my problem now like this:
.track--image {
height: 66%;
border-radius: 50%;
}
This works not for every height of the flex-container but is okay in my case.
How do I achieve the following layout:
I've attempted to use flexbox, justifying the content using jusitfy-content: space-around;. Which almost works, except the first row each column is justified to the container.
Additionally, this may have to work with six items. In that instance then the bottom row should reflect the same as the top row.
Items are generated dynamically.
Is this at all possible? How would I achieve this?
I can update this if you provide me code but this how I did it in my example.
Working example - https://codepen.io/anon/pen/dJodeZ
.item {
width: 350px;
border-bottom: 1px solid black;
padding: 10px 0px 50px 0px;
margin-bottom: 50px;
margin-left: 25px;
display: inline-block;
}
.wrapper{
text-align: center;
justify-content: center;
width: 95%;
margin-top: 100px;
margin-left: 2.5%;
}
I added a button which you can use to generate more boxes with the class "thing" in the flexbox and see how the layout changes. Hope, it helps. :)
$("button").click(function(){
$(".things").append("<div class='thing'></div>");
});
.things {
padding: 0;
margin: 0;
flex-flow:row wrap;
display: flex;
justify-content: space-around;
}
.thing {
border:1px solid black;
padding: 10px;
margin:30px;
flex:1 0 300px;
min-width:300px;
max-width:350px;
height:300px;
background:red;
align-items:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLick me to make boxes!</button>
<div class="things">
<div class="thing"></div>
<div class="thing"></div>
</div>
This question concerns a browser with full css3 support including flexbox.
I have a flex container with some items in it. They are all justified to flex-start but I want the last .end item to be justified to flex-end. Is there a good way to do this without modifying the HTML and without resorting to absolute positioning?
.container {
display: flex;
flex-direction: column;
outline: 1px solid green;
min-height: 400px;
width: 100px;
justify-content: flex-start;
}
p {
height: 50px;
background-color: blue;
margin: 5px;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="end"></p>
</div>
Flexible Box Layout Module - 8.1. Aligning with auto margins
Auto margins on flex items have an effect very similar to auto margins in block flow:
During calculations of flex bases and flexible lengths, auto margins are treated as 0.
Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.
Therefore you could use margin-top: auto to distribute the space between the other elements and the last element.
This will position the last element at the bottom.
p:last-of-type {
margin-top: auto;
}
.container {
display: flex;
flex-direction: column;
border: 1px solid #000;
min-height: 200px;
width: 100px;
}
p {
height: 30px;
background-color: blue;
margin: 5px;
}
p:last-of-type {
margin-top: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
</div>
Likewise, you can also use margin-left: auto or margin-right: auto for the same alignment horizontally.
p:last-of-type {
margin-left: auto;
}
.container {
display: flex;
width: 100%;
border: 1px solid #000;
}
p {
height: 50px;
width: 50px;
background-color: blue;
margin: 5px;
}
p:last-of-type {
margin-left: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
This flexbox principle also works horizontally
During calculations of flex bases and flexible lengths, auto margins
are treated as 0. Prior to alignment via justify-content and
align-self, any positive free space is distributed to auto margins in
that dimension.
Setting an automatic left margin for the Last Item will do the work.
.last-item {
margin-left: auto;
}
Code Example:
.container {
display: flex;
width: 400px;
outline: 1px solid black;
}
p {
height: 50px;
width: 50px;
margin: 5px;
background-color: blue;
}
.last-item {
margin-left: auto;
}
<div class="container">
<p></p>
<p></p>
<p></p>
<p class="last-item"></p>
</div>
Codepen Snippet
This can be very useful for Desktop Footers.
As Envato did here with the company logo.
Codepen Snippet
This question already has answers here:
When flexbox items wrap in column mode, container does not grow its width
(9 answers)
Closed 6 years ago.
When using flex box in default row direction, the container height grows to contain all the flex items, even if it is absolutely positioned.
#container {
position: absolute;
display: flex;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
height: 200px;
}
See http://codepen.io/tamlyn/pen/dPjLoN/?editors=110
However if the flex direction is changed to column, the container collapses to the width of a single flex item, even if the items wrap onto the next column.
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
#container > div {
flex: 0 0 200px;
width: 200px;
}
See http://codepen.io/tamlyn/pen/rarbeN?editors=110
How can I make the container contain all flex items in column mode?
I've actually found a CSS-only solution to this but it isn't the most perfect thing in the world. Here it is: http://codepen.io/anon/pen/vEPBKK
The trick here is to create a visibility: collapsed container. In flex, visibility: collapsed objects take themselves out of the normal flex flow but retain their dimensions for the purpose of layout. This widens the flex container to the desired width but leaves the flex items unaffected. There are a few caveats, however:
This requires a bit of fiddling. As you can see, the magic <div> is a set width but it uses :nth-child to determine how many boxes are before it. If your actual design breaks at more or less than 3 rows, you'll have to adjust this and you'll most certainly have to adjust the width of the object.
Because of a rendering bug, this does not work in IE. Luckily, IE's incorrect implementation does exactly what you wanted in the first place without any changes so all you have to do is give IE it's own stylesheet with some conditional statements and shoot the div.magic some good old display: none.
HTML
<div id="container">
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="fb"></div>
<div class="magic"></div>
</div>
CSS
#container {
position: absolute;
display: flex;
flex-direction: column;
flex-wrap: wrap;
border: 1px solid #f00;
height: 650px;
padding: 1px;
}
#container div.fb {
border: 1px solid #555;
flex: 0 0 200px;
background-color: #ccc;
width: 200px;
margin: 1px;
height: 200px;
}
#container > div.magic {
height: 0;
margin: 0;
padding: 0;
visibility: collapsed;
}
#container > div.magic:nth-child(5),
#container > div.magic:nth-child(6),
#container > div.magic:nth-child(7) {
width: 408px;
}
#container > div.magic:nth-child(8),
#container > div.magic:nth-child(9),
#container > div.magic:nth-child(10) {
width: 612px;
}
#container > div.magic:nth-child(11),
#container > div.magic:nth-child(12),
#container > div.magic:nth-child(13) {
width: 816px;
}
I think this is the CSS you're looking for:
#container {
display: flex;
flex-flow: row wrap;
border: 1px solid #f00;
padding: 1px;
}
#container > * {
border: 1px solid #555;
background-color: #ccc;
height: 200px;
width: 200px;
margin: 1px;
}
The "Container" will always the the width of it's container, in this case the page, but now the boxes will adjust within it properly.
Let me know if I misunderstood your question.
Update
I've been playing with what you're asking for for several days now, and it really seems like it's not possible to do what you're asking... at least not in the direction that you're asking.
The container wants to be the maximum width possible. Unless you force the container to be the exact width, at which point it wont be the full width, but it wont flex with the flexing content either.
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
border: 1px solid #f00;
}
.flex-item {
background-color: #ccc;
padding: 5px;
width: 200px;
height: 150px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
border: 1px solid #555;
}
<div id="container" class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item">2</div>
<div class="flex-item">3</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
<div class="flex-item">6</div>
<div class="flex-item">7</div>
</div>
The first try I do not understand what you mean
as reference material you can see this tutorial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to vertically center text in a div using the method outlined in this article : http://css-tricks.com/vertically-center-multi-lined-text/
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid black;
display: table;
}
.container p {
height: 60px;
max-height: 60px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
<div class="container">
<p>This is a lot of text. A really large amount of text, even. So much text here. And it just keeps going, oh my. Wow - so much text.</p>
</div>
<div class="container">
<p>Here's one line.</p>
</div>
JSFiddle here : http://jsfiddle.net/Vc88w/2/
The div must not go bigger than the specified height of 60px, and any overflowing text should be hidden. The CSS table trick works fine when there is not enough text to make the div overflow, but when there is too much it forces the div to go larger than 60px (the first example), which is not what I want.
Is there a CSS rule besides height and max-height that lets me override the height of a CSS table? Alternatively, how else could I achieve the vertical centering while enforcing a maximum height of 60px on the container div?
yes you must change in ".container" the "display:table" with a "display:block"
.container {
width: 160px;
margin: 80px auto;
padding: 5px;
height: 60px;
max-height: 60px;
border: 1px solid #000;
overflow: hidden;
display: block;
}