I have to build a fluid, scalable, device-independent layout where I need to put 4 elements in a row so that they resize and stick together. Let’s say, 4 images, as they naturally are - one above another, and I just want to group them in two rows - 2 images side by side in 1 row so that I have no problems with layout or structure. Can you show me how? Thank you!
Use flexbox and make it responsive like this:
.element-container {
display: flex;
flex-direction: column;
width: 100%;
}
.element-row {
display: flex;
}
.element {
flex: 0 1 46%;
margin: 0 2% 20px 2%;
margin-bottom: 3%;
max-width: 150px;
}
.element img {
display: block;
width: 100%;
}
<div class="element-container">
<div class="element-row">
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
<div class="element-row">
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
<div class="element">
<img src="http://via.placeholder.com/150x150">
</div>
</div>
</div>
Related
I'm trying to arrange my containers with Flexbox (not Grid!) to look like this image
With the following HTML:
<div class="container">
<div class="sub-container">
<div class="top-sub-container">
<div class="box box-1">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 1
</div>
</div>
<div class="box box-2">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 2
</div>
</div>
</div>
<div class="box box-3">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 3
</div>
</div>
</div>
<div class="box box-4">
<img src="yourChoice.png" />
<div class="box-text">
This is the text of the box 4
</div>
</div>
</div>
And this CSS:
.container {
display: flex;
gap: 1rem;
height: 25rem;
width: 25rem;
padding: 1rem;
background: pink;
}
.top-sub-container {
flex: 1 1 auto;
display: flex;
gap: 1rem;
}
.sub-container {
flex: 1 1 auto;
display: flex;
gap: 1rem;
flex-direction: column;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: column;
border: 1px solid black;
}
However I am getting stuck with my media queries and making this design responsive. Is it because I'm not using calc to evenly divide my flex items within the container? Or does calc have nothing to do with this problem?
If calc is irrelevant, how do I make this layout suitable for a media query with a max-width of 800px? When I test it out on different screen sizes using Dev Tools, there are large gaps.
I am trying to fix it by creating different media query outcomes, but now I'm wondering if there is a maximum amount of media queries I should be creating.
Your advice is gratefully appreciated.
You don't need to many containers, one parent div should be enough for the ".box" classed elements. With one parent, media queries would be much easier to control with different screen sizes.
Trying to create a 2 column, 3 row flexbox container for a food menu. The product elements (which should be 2 per row) do not wrap when shrunk. I'm looking for a way to create a wrapping layout using flexbox. Also, what would be the best way to use Media Queries for the product title to be displayed when the layout is shrunk for mobile-size?
I'm attaching my jsfiddle code:
https://jsfiddle.net/5ksd34nf/#&togetherjs=Ix1LEBTca6
(keep in mind without the images, the design changes so I'm attaching photos)
The HTML is:
`
<section class="menu-page" id="Menu">
<div class="TitleWrapper">
<h1 class="title">Menu</h1>
</div>
<div class="menu-list">
<div class="product">
<div class="imgwrapper">
<img src="images/burger.jpg" alt="Burger" class="food-image">
</div>
<div class="text">
<div class="product-content">
<h3 class="name">Burgers</h3>
<h3 class="price">10 €</h3>
</div>
<div class="ptags">
<p class="allergens">Allergens:</p>
<p class="info">Milk, Gluten</p>
</div>
</div>
</div>
How can I space out the Price from the Name using flexbox?
Basically, you can do something like this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
border: 1px solid gray;
width: 100%;
margin-bottom: 20px;
}
.flex-sub-item {
display: flex;
justify-content: space-between;
}
#media screen and (min-width: 400px) {
.flex-item {
width: calc((100% - 20px) / 2);
margin-right: 20px;
}
.flex-item:nth-child(2n) {
margin-right: 0;
}
}
<div class="flex-container">
<div class="flex-item">
<div class="flex-sub-item">
<div>Title</div>
<div>Price</div>
</div>
</div>
<div class="flex-item">
<div class="flex-sub-item">
<div>Title</div>
<div>Price</div>
</div>
</div>
</div>
I have a wrapper with two boxes in it. The boxes are each to other. In the boxes there is a title (optional) and a content. I have two cases. First case: One of the boxes has a title the other hasn't. Second case: Both boxes have a title. If you take a look on the example for the second case (both titles), the boxes and titles are aligned on the bottom of the wrapper, and the titles are also aligned. There is also an example for the first case (one box without title). Because of the missing title, the alignment isn't correct yet. Here is a screenshot of the problem:
So what I tried is, to figure out the missing space for the first case, which was 21px. After this I select in CSS the second box and add the missing space. For the second case with both title, I tried to add a modifier class on the box and remove the margin-top. So default there would be a space on the second box if no title (this title is optional) and if both titles are avalable, a class should remove it again. Thats the part of the code:
.box + .box {
margin-top: 21px;
}
.box--with-title {
margin-top: 0;
}
Now with my idea it doesn't work. The first case is solved, but my class is not removing the margin. So now the alignment for the second case is wrong. Any ideas how to solve that the class is removing the margin or is there a bether way to do this with pure CSS? Hope this is clear enough.
.wrapper {
display: flex;
justify-content: space-betweet;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
.box+.box {
margin-top: 21px;
}
.box--with-title {
margin-top: 0;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<h3></h3>
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
Simply use align-items:flex-end on the container and no need to consider margin:
flex-end
The cross-end margin edge of the flex item is flushed with
the cross-end edge of the line. ref
.wrapper {
display: flex;
justify-content: space-between;
align-items:flex-end;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
By the way your intial code was almost good, you are simply facing a specificity issue which make the rule of .box--with-title not being considered. You may do something like this instead:
.wrapper {
display: flex;
justify-content: space-betweet;
width: 500px;
background-color: lightgray;
;
margin-top: 36px;
}
.box {
display: flex;
flex-direction: column;
width: 50%;
}
.box__content {
width: 120px;
height: 100px;
background-color: lightcoral;
}
.box+.box {
margin-top: 21px;
}
.box.box--with-title {
margin-top: 0;
}
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box">
<h3></h3>
<div class="box__content"></div>
</div>
</div>
<div class="wrapper">
<div class="box">
<h3>I have a title!</h3>
<div class="box__content"></div>
</div>
<div class="box box--with-title">
<h3>I have also a title!</h3>
<div class="box__content"></div>
</div>
</div>
I have a site header and I would like to use flexbox for this.
I use justify-content: space-between; to evenly divide the free space between the div's but when I add my svg and scale it down to the size of the header bar flexbox reserves the same amount of space as if the svg was displayed at 100%.
I made a example to show what I mean:
#wrapper {
width: 700px;
height: 100px;
display: flex;
justify-content: space-between;
background: blue;
}
.child {
flex: content;
background: red;
}
<div id="wrapper">
<div class="child">
<img src="https://s.cdpn.io/3/kiwi.svg" height="100%" alt="">
</div>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/200/300/?random" height="100%" alt="">
</div>
2
3
</div>
And a JSiddle:
https://jsfiddle.net/03r8vzkn/6/
Is there a way I can avoid this or should I make the svg smaller? This feels a bit hacky because I don't want to make every svg the right size; the scalability is one of its biggest advantages.
You can do it with the display: inline-flex for the .child divs, then they will only take the content's width, of course you also need to make your imgs responsive:
#wrapper {
width: 700px;
height: 100px;
display: flex;
justify-content: space-between;
background: blue;
}
.child {
display: inline-flex; /* only takes the content's width */
background: red;
}
img {
display: block; /* removes bottom margin/whitespace */
max-width: 100%; /* horizontally responsive */
max-height: 100vh; /* vertically responsive */
}
<div id="wrapper">
<div class="child">
<img src="https://s.cdpn.io/3/kiwi.svg" alt="">
</div>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/300/400/?random" alt="">
</div>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
2
3
</div>
<br>
<div id="wrapper">
<div class="child">
<img src="https://picsum.photos/100/200/?random" alt="">
</div>
2
3
</div>
This is a spin off Display Table-Cell: Remove Right and Left Border Space?.
I was trying to create a solution using divs and inner margins of equal width but I get unwanted spacing in between causing my last div to wrap.
https://jsfiddle.net/kyy7qgLz/1/
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 100%;
background-color: blue;
}
.item {
margin-left: 4%;
width: 22%;
display: inline-block;
background-color: red;
}
.item:first-of-type {
margin-left: 0%;
}
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>
Where is the extra spacing coming from and how do I get rid of it?
You need to comment (or removE) the space (or new line) between your HTML elements when you want inline-block elements to not be espaced :
<div id="container">
<div class="item">
Text 1
</div><!--
--><div class="item">
Text 2
</div><!--
--><div class="item">
Text 3
</div><!--
--><div class="item">
Text 4
</div>
</div>
The cleanest solution here is to use flexbox. When you use display: inline-block you are saying “render these elements as blocks of text” so the browser correctly shows the white space you included between your HTML elements.
If you instead set display: flex on your container you will have more accurately described the layout you intend. Namely, you will have said direct children of this container should use a flex layout (instead of a layout intended for text).
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
background-color: blue;
display: flex;
}
.item {
margin-left: 4%;
flex: 1 0 auto;
background-color: red;
}
.item:first-of-type {
margin-left: 0%;
}
<div id="container">
<div class="item">
Text 1
</div>
<div class="item">
Text 2
</div>
<div class="item">
Text 3
</div>
<div class="item">
Text 4
</div>
</div>