I have the following HTML code (the number of divs within the .container can vary).
I want to give these a min width, but otherwise these should fill up the whole width of the screen. When the width of the screen is too small (for responsive designs) the divs should simply go on a new line.
It seems simple, but I've been banging my head with gird, flex and even float, but nothing seems to work. Anybody can help without using media queries?
<div class="container">
<div>pippo</div>
<div>pluto</div>
<div>paperino</div>
<div>topolino</div>
</div>
with flex-wrap: wrap; when there was no space for div, div wrap to the next line.
also i use justify-content: space-between; to fill up the whole width of the screen
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
<div class="container">
<div>pippo</div>
<div>pluto</div>
<div>paperino</div>
<div>topolino</div>
</div>
Related
I have a div container like this:
<div class="list__products">
<div class="products">
{{#each rows}}
<a href="javascript:addToRow('{{id}}')" class="products__a" value="{{value}}" id="{{id}}">
<img class="products__a-img" src="../../../../resources/media/products/{{id}}.webp">
{{name}}
</a>
{{/each}}
</div>
</div>
where with each loop I generate a list of a products with handle bars, and I make it a specific size and adjust other parameters with this css:
.main__new .list__products{
display: flex;
flex-flow: row wrap;
width: 36vw;
}
.main__new .products{
display: flex;
flex-flow: row wrap;
max-height: 70vh;
overflow-y: auto;
justify-content: space-around;
align-content: space-around;
margin: 1.5vh 0;
}
and what is the problem? well, when I have a lot of products, the first ones are outside the div box and cannot be seen, I tried to fix it by changing the position but I can't find a feasible way to do it, try to change the height and overflow parameters assigning them to the list__products container but that makes it impossible to scroll to see the buttons that are outside this size, is there any other way to do it?
Sample of images:
This question already has answers here:
Center buttons on wrap only
(2 answers)
Closed 1 year ago.
What I would like to do
Consider two elements in a container:
<div class="container">
<div>Thing 1</div>
<div>Other thing</div>
</div>
I would like the following criteria to be met:
In a wide context, the two elements should be at opposite ends of the container.
In a narrow context, such that the two elements won't fit in a single row, the second element should 'wrap' onto a new line.
In a context where the elements are on two rows, both elements should be centred.
In addition, I would like to avoid using media breakpoints, so that the layout will work irrespective of the widths of the elements and/or the container. The solution doesn't need to use flex-box (it's just easier to explain what I want in terms of flex-box).
My attempts
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
This works for the first two criteria, but not the third. I've experimented with different values of justify-content/flex-grow/flex-basis but have not been able to find a winning combination.
I've also thought about using grid but had equally little success.
Note
This is a very similar question (although, a more specific use-case since I only require 2 elements rather than a general solution.)
With justify-content: space-around you can achieve the 3rd criteria with elements present at opposite end in wide context
.container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
<div class="container">
<div>Thing 1</div>
<div>Other thing</div>
</div>
Else if you want them to present at extreme end in wide context then have to use #media , this depend on the width of text-div's which makes them wrap after a certain reduce in view port width .
Here will take 500px width where text will wrap for demo only
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
#media only screen and (max-width: 500px) {
.container {
justify-content: center;
}
.textDiv {
width: 100%;
text-align:center
}
}
<div class="container">
<div class="textDiv">Thing 1</div>
<div class="textDiv">Other thing</div>
</div>
I'm trying to create a layout so that when I click on "See More" to expand the text of one container, the surrounding containers remain in the same position.
There are three containers and each container has two wrappers, a top which contains the title and bottom which contains the image, text and button. I don't know what the length of the titles will be beforehand, so in order to make sure that the boxes, text and button line up, I've given each container justify-content: space-between so that the bottom wrappers always align.
The issue arises after clicking "See More", where the bottom wrapper of each container moves down to fit the height of the container.
.main-container {
display: flex;
flex-direction: row;
}
.container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.top-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.bottom-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
<div class="main-container">
<div class="container">
<div class="top-wrapper">
<div class="title">
TITLE 1 IS LONG THAT IT GOES TO NEXT LINE
</div>
</div>
<div class="bottom-wrapper">
<div class="image-text-wrapper">
<div class="image-container">
<img class="image" src="https://dummyimage.com/200x200/000/000">
</div>
<div class=“text” id="text">
{{ text }}
//See More code
</div>
</div>
<button>
BUTTON 1
</button>
</div>
</div>
<div class="container">
//second container code
<div>
<div class="container">
//third container code
<div>
</div>
Should I be using a table or is there a simple CSS fix to this?
You can find the full code here: Plunkr
Try adding the following to your .container class:
.container {
align-self: flex-start;
}
The align-self property allows you to override the setting for align-items that is controlling your flex items' alignment.
And adding the following to the .title class:
.title {
min-height: 50px
}
You may need to play around with this setting, but it prevents the image from rendering without any space between it and your title.
Caveat: the CSS you included here in your post isn't exactly what I got when I opened your Plunkr link -- the .container didn't have display: grid; set, but I think this should work nonetheless.
Consider this HTML:
<div class="flexbox-container">
<div class="flexbox-item">
Some text.
</div>
<div class="flexbox-item">
Some quite longer, longer, longer text.
</div>
<div class="flexbox-item">
Some other text.
</div>
</div>
and this CSS:
.flexbox-container {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}
How can I tell the flexbox container to give all of its children a 100% width unless all of them fit in the same line, effectively occupying 33.33% each?
Tried this:
.flexbox-item {
min-width: 33%;
flex-grow: 1;
}
But it's not exactly what I'm looking for, since as soon as 2 items fit in a line, the third one will be wrapped.
Edit- Some more info: The expected behaviour of these divs is for them to occupy 100% width on mobile, and then as soon as they all fit in the same line, to have justify-content: space-between work its magic. Space-between is required. I can do this in a more specific way with breakpoints but would like to go flexbox all the way.
Pen here
Hellow I have a problem with my website.
I'm coding responsive layout and I have problem with portrait mode.
My site is here - www.szafortest.pl
You can check css and html code in webbrowser. If You want I can put code here.
My problem is that I have big white margin. Please refer to image below.
What I would like to do is to resize "textContent" class. I tried using viewport but always I can find device which will display this site badly.
Do You know any good solution for it?
As James Newton suggested in the comments, you could use flexbox to solve this problem. I have a library which allows me to position elements in rows and columns with flexbox. They are named flex-row and flex-column. The names should speak for itself. There is one more important class called autoflex. It allows me to fill the remaining space of a div or size divs evenly. This is a solution you could try:
HTML:
<body class="flex-column">
<div class="yourContent"></div>
<div class="autoflex"></div> <!--This will fill all whitespace -->
</body>
CSS:
.flex-column {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.autoflex {
-webkit-flex: 1 1 auto;
flex: 1 1 auto;
}
EDIT
These classes are only supporting standard and webkit browsers. To make this more compatible with other browsers, you should add -moz-flex for example to the properties.