Display divs in the row on small screens - javascript

I am trying to display these divs with flex. But when the width of the screen gets less then approximately 500px I see only one div on the row. How to keep 2 divs on the row when the width of the screen gets less than it was before?
.box {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.wrapper {
margin: 20px;
background: beige;
border-radius: 15px;
}
.divla{
margin: 15px;
}
#media(max-width:500px) {
.box{
width: 50%;
}
<div class="box">
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
<div class="wrapper">
<div class="divla">
<h2 style="text-align:center; margin-top: 3px">hello</h2>
</div>
</div>
</div> `

Please use nowrap instead of wrap in flex-wrap property.
.box {
display: flex;
flex-wrap: nowrap;
align-content: space-between;
}
You can also remove flex-wrap: nowrap; from the class as nowrap is set by default.
.box {
display: flex;
align-content: space-between;
}

Related

Center div by specific item

Is it possible to center not the whole child-container div but by an specific item. The content of the first p and last p have different heights and can change dynamically.
.container {
display:flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
}
.big{
line-height:40px;
}
.bigger{
line-height:80px;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p>Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>
Give the child container a position of relative and the center paragraph absolute. Then give the center paragraph a margin top and bottom of 50vh:
.container {
display:flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
position: relative;
}
.big{
line-height:40px;
}
.bigger{
line-height:80px;
}
.center {
position: absolute;
margin-top: 50vh;
margin-bottom: 50vh;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p class="center">Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>
Assuming you mean center horizontally, you just need to expand the child container with flex-grow and use align-self on your chosen child:
.container {
display: flex;
align-items: center;
height: 300px;
background-color: red;
}
.child-container {
display: flex;
flex-direction: column;
justify-content: space-evenly;
background-color: purple;
flex-grow: 1;
align-items: flex-start;
}
.child-container * {
background-color: greenyellow;
}
.big {
line-height: 40px;
}
.bigger {
line-height: 80px;
}
.center {
align-self: center;
}
<div class="container">
<div class="child-container">
<p class="big">Lorem ipsum</p>
<p class="center">Center this</p>
<p class="bigger">Lorem ipsum</p>
</div>
</div>

How to make the content in a horizontally scrollable div broken into two lines?

The code below produces a horizontally scrollable div. I want to make it such that this text: I want to break this text up into two lines, is broken into two lines instead of having it on one long line. I tried reducing the width of the .navigation-item-content but it didn't break the text into two lines and just moved the .navigation-item-content div's around.
Any suggestions? I just can't get it to work.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.navigation {
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
background-color: white;
background-color: lightgray;
}
.navigation-item {
padding: 12px 11px 7px 11px;
width: 100%;
}
.navigation-item-content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.navigation-item-title {
text-align: center;
}
</style>
</head>
<body>
<div class="navigation">
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
<div class="navigation-item">
<div class="navigation-item-content">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines</span>
</p>
</div>
</div>
</div>
</body>
</html>
You need some changes to your styles. .navigation class makes width: 100% and .navigation-item class add width divide 100 by your items number. like:
.navigation {
white-space: nowrap;
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
background-color: white;
background-color: lightgray;
flex: 1 1 100%;
position: relative;
}
.navigation-item {
display: flex;
flex-wrap: wrap;
padding: 12px 11px 7px 11px;
flex: 1 0 25%;
white-space: normal;
}
.navigation-item-content {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.navigation-item-title {
text-align: center;
}
You can either add a <br> tag where you want to break the line,
or you can remove white-space:nowrap from the .navigation so that it doesn't all go in the same line
Consider adding a specific width to create the line break and disable the shrinking:
.navigation {
display: flex;
overflow: auto;
background-color: white;
background-color: lightgray;
}
.navigation-item {
padding: 12px 11px 7px 11px;
width: 200px;
flex-shrink: 0; /* don't forget this*/
}
.navigation-item-title {
text-align: center;
}
<div class="navigation">
<div class="navigation-item">
<p class="navigation-item-title">
I want to break this text up into two lines
</p>
</div>
<div class="navigation-item">
<p class="navigation-item-title ">
<span>I want to break this text up into two lines
</p>
</div>
<div class="navigation-item">
<p class="navigation-item-title ">
I want to break this text up into two lines
</p>
</div>
<div class="navigation-item">
<p class="navigation-item-title ">
I want to break this text up into two lines
</p>
</div>
</div>

Layout with text and images where bottom and top is aligned

Trying to create layout like this:
Rules:
2 columns.
Each column can contain any number of images (2 and 3 in our case).
Each image can have a caption with any length.
The first images in each column must be aligned.
The last images in each column must be aligned.
We do not know how much lines caption will occupy, but we know aspect ratio of each image.
Current work in progress on JSFiddle https://jsfiddle.net/LpL2jmgj/
Will post updates if I'll find a solution.
I guess it's not possible to do this just via CSS even with display:grid?
is this your answer???
i just use flex box and a little of margin , i hope you like it :)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.columns {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
flex-wrap: nowrap;
margin : 5px;
}
.rows{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
margin : 5px;
flex-wrap: nowrap;
}
p{
margin : 2px;
}
.col {
width: 100px;
margin : 5px;
position: relative;
}
.col1 {
margin : 5px;
flex : 5;
background-color : red;
height : 200vh;
}
.col2{
margin : 5px;
flex:3;
background-color : blue;
height : 200vh;
}
.image {
width: 100%;
position: relative;
height: 0;
overflow: hidden;
}
.image img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div class="rows">
<div class="col1">
<div class="columns">
<img style="width:100%;" src="https://dummyimage.com/600x400/000/fff" />
<p>text</p>
</div>
<div class="columns">
<img style="width:100%;" src="https://dummyimage.com/600x400/000/fff" />
<div class="rows">
<p>text</p>
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>
</div>
</div>
<div class="col2">
<div class="columns">
<img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
<div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
<div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
<div class="rows"><p>text</p> <p>text</p> <p>text</p> </div>
</div>
<div class="columns">
<img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
<p>text</p>
</div>
<div class="columns">
<img style="width:100%" src="https://dummyimage.com/600x400/000/fff" />
<p>text</p>
</div>
</div>
</div>

Flexbox grow inside anchor

I'm facing a problem where I would like an anchor flexbox child to take all remaining height available. I thought that adding flex-grow: 1 would suffice but it is not working. The div inside the anchor does not take the full height.
Question: Is there a way to make it work without converting my plain anchor to a flexbox element?
Here is a codepen illustrating the issue:
https://codepen.io/alansouzati/pen/YVpYeO
I've created 3 tiles where the first one has the anchor to exemplify. You can see that the price does not align with the other siblings.
.plain is not a flex parent, so setting flex-grow: 1 on .service doesn't do anything.
Just add display: flex to .plain
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
display: flex;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>
See Below. I made the ".service" after the anchor tag absolute and relative to the main container. Hope it helps
.tiles {
display: flex;
flex-wrap: wrap;
background-color: #d3d3d3;
padding: 12px;
justify-content: center;
}
.tile {
display: flex;
border: 1px solid #333;
flex-basis: 200px;
background-color: white;
margin: 12px;
flex-direction: column;
position: relative;/**Added Code**/
}
.tile:hover {
background-color: #f1f1f1;
}
.service {
display: flex;
flex-direction: column;
padding: 12px;
flex-grow: 1;
}
.service-body {
flex-grow: 1;
}
p {
color: #a8a8a8;
}
.plain {
margin: 0;
color:inherit;
text-decoration:none;
flex-grow: 1;
}
/**Added Code**/
.plain > .service {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<div class='tiles'>
<div class='tile'>
<a href="http://google.com" class='plain' target="_blank">
<div class='service'>
<h2>Service 1</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</a>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 2</h2>
<div class='service-body'>
<p>This is a sample service</p>
</div>
<span>$9.99</span>
</div>
</div>
<div class='tile'>
<div class='service'>
<h2>Service 3</h2>
<div class='service-body'>
<p>This is a sample service with a long text that will make things render differently</p>
</div>
<span>$9.99</span>
</div>
</div>
</div>

javascript fires if both div have one same class

Suppose, i have 2 div 'menu' & 'pipe'. when i click menu pipe's width will be 100% but here i have 6 pair same like this so affecting one will affect all. "main code is given bellow."
now here i want js like this,
addclass 'addwidth' in pipe div but that pipe div have one same class form the object(here, menu div) form which the click event is happen,
eg. menu one div is clicked so only pipe one div have to be affected.
.hasClass can help in some way but i dont know how.
help me for it's js,thanks in advance.
.leftbox{
width:100px;
height:400px;
background-color:lightgreen;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.uprow{
width:100px;
height:100%;
background-color:pink;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.menu{
width:50px;
height:50px;
background-color:yellow;
}
.selected{
background-color:green;
border:2px solid blue;
}
.downrow{
width:100%;
height:100%;
background-color:gray;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pipe{
width:10%;
height:5px;
background-color:aqua;
}
<div class="leftbox">
<div class="uprow">
<div class="menu one"></div>
<div class="menu two"></div>
<div class="menu three"></div>
<div class="menu four"></div>
<div class="menu five"></div>
<div class="menu six"></div>
</div>
<div class="downrow">
<div class="pipe one"></div>
<div class="pipe two"></div>
<div class="pipe three"></div>
<div class="pipe four"></div>
<div class="pipe five"></div>
<div class="pipe six"></div>
</div>
</div>
Use .eq() with .index()
$('.uprow .menu').on('click', function() {
$('.downrow .pipe').eq($(this).index()).css('width', '100%')
})
.leftbox {
width: 100px;
height: 400px;
background-color: lightgreen;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.uprow {
width: 100px;
height: 100%;
background-color: pink;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.menu {
width: 50px;
height: 50px;
background-color: yellow;
}
.selected {
background-color: green;
border: 2px solid blue;
}
.downrow {
width: 100%;
height: 100%;
background-color: gray;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pipe {
width: 10%;
height: 5px;
background-color: aqua;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="leftbox">
<div class="uprow">
<div class="menu one"></div>
<div class="menu two"></div>
<div class="menu three"></div>
<div class="menu four"></div>
<div class="menu five"></div>
<div class="menu six"></div>
</div>
<div class="downrow">
<div class="pipe one"></div>
<div class="pipe two"></div>
<div class="pipe three"></div>
<div class="pipe four"></div>
<div class="pipe five"></div>
<div class="pipe six"></div>
</div>
</div>
You can use the click event of the selected element like below.
In below example, clicking any element will change the width to 100% for that element only.
$(function() {
$('.pipe').click(function() {
/* $(this) is the clicked/selected object. */
/* Do your required action using $(this). Below is an example */
$(this).css('width', '100%');
});
});
.leftbox {
width: 100px;
height: 400px;
background-color: lightgreen;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.uprow {
width: 100px;
height: 100%;
background-color: pink;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.menu {
width: 50px;
height: 50px;
background-color: yellow;
}
.selected {
background-color: green;
border: 2px solid blue;
}
.downrow {
width: 100%;
height: 100%;
background-color: gray;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pipe {
width: 10%;
height: 5px;
background-color: aqua;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="leftbox">
<div class="uprow">
<div class="menu one"></div>
<div class="menu two"></div>
<div class="menu three"></div>
<div class="menu four"></div>
<div class="menu five"></div>
<div class="menu six"></div>
</div>
<div class="downrow">
<div class="pipe one"></div>
<div class="pipe two"></div>
<div class="pipe three"></div>
<div class="pipe four"></div>
<div class="pipe five"></div>
<div class="pipe six"></div>
</div>
</div>

Categories

Resources