align Flex elements from bottom row under the other elements [duplicate] - html

This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 5 years ago.
I have few elements I'm trying to align. the first two rows are perfectly aligned because they have the same number of elements. the last one have less elements, and I would like to keep the bottom elements aligned with the top ones. Like this image example
HTML
<div id="bulbsCentralizer">
<div id="letterCentralizer">
<h3 class="letter">A</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">B</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">C</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">D</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">E</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">F</h3>
</div>
<div id="letterCentralizer">
<h3 class="letter">G</h3>
</div>
</div>
CSS
#bulbsCentralizer {
width: 600px;
height: auto;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: flex;
flex-wrap: wrap;
flex-flow: row wrap;
}
#letterCentralizer {
width: 40px;
height: 60px;
text-align: center;
background-color: orange;
position: relative;
float: left;
width: calc(100% * (1/8) - 10px - 1px);
margin-top:10px;
}

If you want to use flex to align your elements, don't use float or position. Use flex properties! More info on: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
width: 200px;
}
.element {
width: 50px;
height: 50px;
background-color: red;
flex: 0 0 32%;
margin: 1% 0;
}
.element:nth-child(3n-1) {
margin-left: 2%;
margin-right: 2%;
}
<div class="container">
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
<div class="element"></div>
</div>

https://jsfiddle.net/vwkvstfg/6/
Basically, flex handles displays over one axis pretty well. But this problem's has a better solution - using display: grid
grid-template-columns is gonna be used here as more of a convenience.
Cheers!

Related

How to center align divs inside the parent container? [duplicate]

This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 1 year ago.
There is an issue with the first three divs which contains other elements in it.
If I remove them, then it is working fine but not otherwise.
See Output Here
.results{
text-align: center;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
best solution for collect divs inside a container is using
flex (display:flex) or gird (display:gird) witch grid is not working correctly in old browser ( internet explorer)
but if you don't like to use these methods
here is a tricky way
.results{
text-align: center;
position:relative;
}
.result-box{
width: 200px;
height: 250px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
float:left;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>
Check the below snippet
.results{
text-align: center;
display: flex;
justify-content: center;
}
.result-box{
width: 50px;
height: 150px;
background-color: red;
margin: 10px;
padding: 5px;
display: inline-block;
}
<div class="wrapper">
<div class="results">
<div class="result-box"><p>Hello</p><p>World</p></div>
<div class="result-box"><p>Nothing</p></div>
<div class="result-box"><p>Everything</p></div>
<div class="result-box"></div>
<div class="result-box"></div>
<div class="result-box"></div>
</div>
</div>

Problem when using with overflow-x: scroll and justify-content: center [duplicate]

This question already has answers here:
Can't scroll to top of flex item that is overflowing container
(12 answers)
Closed 2 years ago.
I am having issue while using overflow-x: scroll and justify-content: center on flex parent container.
Please see my code below.
issue: first flex child item is not showing it is crop in left or other all child item. please see my screenshot and code below.
I need your help. thank you in advance.
.container {
width: 500px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-direction: row;
overflow-x: scroll;
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
The justify-content:center is making the content to align to center and some of the left is cut off. You could remove it and try.
.container {
width: 500px;
margin: 0 auto;
display: flex;
flex-direction: row;
overflow-x:scroll
}
.box {
height: 100px;
border: 1px solid red;
min-width: 100px;
margin-right: 10px;
flex-grow: 1;
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
remove "justify-content:center". And you said that you need center aligned elements when there are only 1 or 2 elements...so the answer is they will by aligned automatically...if there will be only two elements each of them will have 250px width and if there will be only one then width of this element will be 500px.

How can I get even heights of unknown elements inside a column? [duplicate]

This question already has answers here:
Equal height flex items in flex columns
(3 answers)
Closed 5 years ago.
I'm using flex to create even columns and vh to make them the same height. That's working fine but inside the columns I can have an x number of items in them. I'd like for elements in each column to be even height depending on how many items are present (using css).
1 = 100%
2 = 50%
3 = 33.33%
etc.
I know I can do this through JS but I'd like to automate this through css via flex, grid, or something elese.
I've tried replicating your problem. Use flex: 1 on .items so that each and every item take equal space (according to the problem statement).
Have a look at the snippet below:
body {
margin: 0;
}
.parent {
width: 80%;
padding: 20px;
display: flex;
border: 1px solid red;
}
.child {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: flex-end;
padding: 20px;
border: 1px solid blue;
height: 60vh;
}
.item {
flex: 1;
background: lightGreen;
border: 1px solid green;
}
<div class="parent">
<div class="child">
<div class="item">33.33%</div>
<div class="item">33.33%</div>
<div class="item">33.33%</div>
</div>
<div class="child">
<div class="item">50%</div>
<div class="item">50%</div>
</div>
<div class="child">
<div class="item">100%</div>
</div>
</div>
Hope this is what you are trying to achieve.
This is all you need to make it work with the Flexbox:
.flex-container {
display: flex;
}
.flex-item {
display: flex;
flex-direction: column;
flex: 1;
}
.item {
flex: 1;
border: 1px solid;
}
<div class="flex-container">
<div class="flex-item">
<div class="item">1/1</div>
</div>
<div class="flex-item">
<div class="item">1/2</div>
<div class="item">1/2</div>
</div>
<div class="flex-item">
<div class="item">1/3</div>
<div class="item">1/3</div>
<div class="item">1/3</div>
</div>
<div class="flex-item">
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
<div class="item">1/4</div>
</div>
</div>

How to make flex child height to wrap content [duplicate]

This question already has answers here:
How to disable equal height columns in Flexbox?
(4 answers)
Closed 5 years ago.
What I basically want is to make each child element's height to wrap its content.
Here is my code:
<style>
.parent{
display: flex;
}
.child{
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
</style>
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>
Output:
Expected output:
You just need to set align-items: flex-start on parent element because default value is stretch.
.parent {
display: flex;
align-items: flex-start;
}
.child {
padding: 5px;
margin: 10px;
background: green;
height: auto;
}
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
<div class="child" style="height:50px">child1</div>
</div>

Flexbox in Firefox: Items are not lined up properly [duplicate]

This question already has answers here:
Absolutely positioned flex item is not removed from the normal flow in IE11
(4 answers)
Closed 6 years ago.
This http://jsfiddle.net/7ra5oL77/ should line up the orange dots horizontally with the text underneath.
The relevant items are:
<div class="draggable ui-widget-content"></div>
and
<div class="item">60°C</div>
This works in Chrome and Edge, but Firefox seem to not use the full width and there is a too big white space on the right side.
Can anyone help me?
The issue that I see is that firefox is recognizing your div.lines as items within the flexbox even though the are position absolute. If you pull them outside of the container or delete them altogether (I don't see their purpose), then you should be fine.
The absolute positioned .lines mess up with the space-around alignment:
#graph-containment-wrapper {
justify-content: space-around;
}
This seems a bug, because the spec says
An absolutely-positioned child of a flex container does not
participate in flex layout.
The justify-content property aligns flex items along the
main axis of the current line of the flex container.
As a workaround, you can use auto margins to achieve the same effect without the interference of absolutely positioned elements:
.draggable {
margin: 0 auto;
}
.lines {
padding: 0px;
margin: 0px;
height: 1px;
background-color: orange;
position: absolute;
}
.draggable {
width: 30px;
height: 30px;
background: orange;
border-radius: 30px;
cursor: n-resize;
top: 200px;
z-index: 1;
border: 0px;
display: flex;
justify-content: center;
align-items: center;
color: white;
margin: 0 auto;
}
.x-axis {
display: flex;
justify-content: space-around;
width: 100%
}
#graph-containment-wrapper {
display: flex;
height: 20rem;
background-color: white;
}
.graph {
-webkit-user-select: none;
}
.draw-area{
width: 100%
}
.hlines{
background-color: lightgray;
width:100%;
height: 1px;
display: flex;
}
.hlines-container{
display:flex;
min-height: 100%;
justify-content: space-between;
flex-direction: column;
padding: 15px;
height: 20rem;
margin-top: -20rem
}
<div class="graph">
<div class="draw-area">
<div id="graph-containment-wrapper">
<div class="draggable ui-widget-content"></div>
<div class="draggable ui-widget-content"> </div>
<div class="draggable ui-widget-content"> </div>
<div class="draggable ui-widget-content"> </div>
<div class="draggable ui-widget-content"> </div>
<div class="lines" id="myline0"></div>
<div class="lines" id="myline1"></div>
<div class="lines" id="myline2"></div>
<div class="lines" id="myline3"></div>
</div>
<div class="hlines-container">
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
<div class="hlines"></div>
</div>
</div>
<div class="x-axis">
<div class="item">20°C</div>
<div class="item">30°C</div>
<div class="item">40°C</div>
<div class="item">50°C</div>
<div class="item">60°C</div>
</div>
</div>