How to position element's in specific way? - javascript

I have some html div's and simple css style, something like this:
.wrap{
display: flex;
flex-direction:row;
justify-content: space-around;
align-items: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display:flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>
I would like to change position of this element on mobile device to something like this:
enter image description here
How can I do this? I was thinking first of all about flex-wrap and order?

You can do it like below:
.wrap {
display: flex;
flex-direction: row;
flex-wrap:wrap; /* enable the wrap*/
justify-content:center; /* center everything */
}
/* create a hidden element taking full width
used to seperate our elements
*/
.wrap:before {
content:"";
flex-basis:100%;
order:1
}
/* put all even elements after the seperation to have a new row*/
.child:nth-child(even) {
order:2;
}
.child {
width: 45px;
height: 45px;
margin:5px;
border-radius: 50%;
background-color: lightBlue;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
<div class='wrap'>
<div class='child'>
0
</div>
<div class='child'>
1
</div>
<div class='child'>
2
</div>
<div class='child'>
3
</div>
<div class='child'>
4
</div>
<div class='child'>
5
</div>
<div class='child'>
6
</div>
<div class='child'>
7
</div>
<div class='child'>
8
</div>
<div class='child'>
9
</div>
<div class='child'>
10
</div>
</div>

remove display: flex from .wrap and give .child display: inline-flex
CSS will be like that_
.wrap{
text-align: center;
}
.child{
width: 45px;
height: 45px;
border-radius: 50%;
background-color: lightBlue;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 20px;
}

Related

Display divs in the row on small screens

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;
}

How can i move a small text on 2 lines, without using 1 div only

How can I make "This text" to be on 2 lines, and center it next to the circle, also put the arrow between first and second circle
https://i.stack.imgur.com/2wfVy.png
<div className="steps">
<div className="circle">
<div className="step-number">{number}</div>
</div>
<div className="step-text">This text</div>
<div>{ shouldRenderArrow && <Icon className="arrow" name="ArrowDownward" /> }</div>
</div>
Some change require in your div and some styling need then you got.
.steps{
display: flex;
}
.circle {
border: 1px solid red;
border-radius: 50px;
float: left;
width: 25px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.step-text {
align-self: self-start;
justify-self: start;
flex-direction: column;
margin-left: 6px;
padding-top: 6px;
}
.arrow{
border: 1px solid;
width: 11px;
display: flex;
align-self: center;
justify-self: flex-end;
height:25px
}
.circle-arrow {
display: flex;
flex-direction: column;
}
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">1</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">2</div>
</div>
<Icon class="arrow" name="ArrowDownward" />
</div>
<div class="step-text">This text</div>
</div>
<div class="steps">
<div class="circle-arrow">
<div class="circle">
<div class="step-number">3</div>
</div>
</div>
<div class="step-text">This text</div>
</div>

Disable resizing of fixed flex

I'm using this html below to display a flex view on my website. But changing the text (length of the text) from a div will lead to the crazy-looking autoresizing.
How can I avoid this resizing in relation to this special div element below? How to keep the same layout when the click button is clicked?
Edit: I would like that neither the size nor the position of any element changes. (No matter how much text is inside!)
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
.wrapper{
width:100%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
}
.wrapper > div{
flex: 1;
text-overflow: ellipsis;
overflow: hidden;
}
<div class="wrapper">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
Here's the solution:
document.addEventListener("click", function(e){
if(e.target.id == "button")
document.getElementById('text').innerHTML+='.';
});
#navigation {
position: fixed;
width: 100%;
height: 30%;
left: 0%;
top: 0%;
background: black;
display: flex;
justify-content: space-around;
text-align: center;
color: white;
flex-basis: 1 1 100%;
}
#navigation > div {
flex-direction: column;
overflow: hidden;
width: 100%;
}
#button {
position: relative;
}
<div id="navigation">
<div>
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<button id="button">click</button>
Edit: To lock the tekst as well. I would do it with align it left and than adding a padding to it:
#navigation > div > div:nth-child(2) {
padding-left: 10%;
text-align: left;
}
Add flex: 1 0 33%; to the elements you don't want to resize. This is equivalent to:
flex-grow: 1;
flex-shrink: 0;
flex-basis: 33%;
<div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white">
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div style="flex: 1 0 33%;">
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">
Here's an example of using max-width with your code. The first block will never be wider than 150px and text which which will overflow will be hidden.
.wrapper{
width:100%; background: black; display: flex; justify-content: space-around; text-align: center; color: white;
}
.wrapper > div{
flex: 1;
text-overflow:ellipsis;
overflow:hidden;
}
<div class="wrapper">
<div style="max-width: 150px">
<div style="font-size: 17px">Info A</div>
<div style="font-size: 29px;" id="text">text1</div>
</div>
<div>
<div style="font-size: 17px">Info B</div>
<div style="font-size: 29px;">text2</div>
</div>
<div>
<div style="font-size: 17px">Info C</div>
<div style="font-size: 29px;">text3</div>
</div>
</div>
<br><br><br><br>
<input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click">

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>

Get height of flexbox row

I have a flexbox container where the items on each row overflow, and go onto the next line. Each item is aligned to a baseline; hence, the rows can be of varying sizes depending on which items are on which row and how they align to their baseline.
The items are pictured below being centered at a baseline:
I was wondering if there was a way to dynamically get the row height? Or get the distance from each item's baseline to the top/bottom of the row?
I would like to do this so i can set a hover state around the items that allow the hover to stretch over the item and have the height go all the way to the top of each row, hence the hover for each items will look as follows:
my attempt:
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
I was able to make the hover effect same height on all items by changing
.flex-container {
align-items: baseline
}
to
.flex-container {
align-items: strech
}
then I added the following lines to make items align vertically:
.flex-item {
display: flex;
align-items: center;
}
However, your original code is aligning these items "baseline" instead of "center".. I didn't figure out how to do that.
Hope this helps.
codepen: https://codepen.io/bottlecap/pen/pEgbNx
Try plugging this into codepen.
html
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
css
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
outline:1px solid red;
height:62vh;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 400px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
flex-direction:column;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}

Categories

Resources