Minimal working example: http://jsfiddle.net/3qxfknd7/
You can see that the A and B are both centered horizontally within their respective divs, but not vertically. The height is dynamic, and thus I cannot set the line-height to the font-size, because a button with larger font-size will have to determine the line-height. Next to that, the class large may or may not be present: I cannot assume it is present!
How am I going to do this?
<div class="button-group">
<div class="button"><span>A</span></div>
<div class="button"><span class="large">B</span></div>
</div>
.button-group {
display: flex;
flex-flow: row nowrap;
align-content: flex-start;
justify-content: flex-start;
}
.button {
flex: 1 0 auto;
text-align: center;
outline: 1px solid red;
}
.button span {
font-size: 20px;
}
.button span.large {
font-size: 40px;
}
Not sure if this is what you are after:
.button-group {
display: flex;
flex-flow: row nowrap;
}
.button {
display:flex;
align-items: center;
flex: 1 0 auto;
align-content: center;
justify-content: center;
outline: 1px solid red;
}
.button span {
font-size: 20px;
}
.button span.large {
font-size: 40px;
}
<div class="button-group">
<div class="button"><span>A</span></div>
<div class="button"><span class="large">B</span></div>
</div>
Related
I have placed two divs in a flex-direction row with a gap of 70px as shown in the figure:
In the above picture, we could see the date to be 8/12/22 but when we change the date to 12/12/22 the gap between the divs(i.e date and step counts) slightly increases due to the extra digit added to the date. This gives a very bad user experience.
Here is the code:
JS
<div className="DataAreaParent">
<div className="DataParent">
<span id="XAxisData" className="SpanText"></span>
<b className="BoldText">{props.xAxis} </b>
</div>
<div className="DataParent">
<span id="YAxisData" className="SpanText"></span>
<b className="BoldText">{props.yAxis}</b>
</div>
</div>
CSS:
.DataAreaParent {
display: flex;
flex-direction: row;
gap: 70px;
margin: auto;
padding: 10px 30px 10px 30px;
}
.DataParent {
display: flex;
flex-direction: column;
}
.BoldText {
color: gray;
}
.SpanText {
font-size: 1.5rem;
font-weight: bolder;
}
Please guide me on how the gap will not change even though digits in the date increase or decrease.
.DataAreaParent{
display: flex;
flex-direction: row;
# You can this line to set the auto gap between flexed container.
justify-content: space-between;
gap: 70px;
margin: auto;
padding:10px 30px 10px 30px;
}
It happens because of the fixed gap and the width is not assigned to .DataAreaParent.
Remove the fixed gap and add the width in .DataAreaParent like,
.DataAreaParent {
display: flex;
flex-direction: row;
justify-content: space-between;
/* gap: 70px; */
width: 100px;
margin: auto;
padding: 10px 30px 10px 30px;
}
Also, add min-width to date and align it to the left of its container. It will solve your problem.
.DataParent {
display: flex;
flex-direction: column;
min-width: 58px;
align-items: flex-end;
}
I have a collection of a couple of divs (called buttons) inside a div container.
When attempting to resize the screen to check for responsiveness, (trying to keep them centered in the middle of the screen) instead of shrinking, the buttons FIRST get clipped from (or hide behind) both sides of the screen.
here is my code:
.button {
outline: 1px solid black;
min-width: 0;
min-height: 0;
width: 10rem;
height: 10rem;
flex: 1 0 1rem;
}
.container {
display: flex;
align-items: center;
justify-content: center;
}
.parentContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
Below are the global styles:
html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
display: flex;
justify-content: center;
}
The html is made using components:
<div className={parentContainer}>
<div className={container}>
<HeaderButton />
<HeaderButton />
<HeaderButton />
<HeaderButton />
<HeaderButton />
<HeaderButton />
</div>
</div>
The header button component:
const Button = () => {
return (
<div className={button}>
<h1>{props.text}</h1>
</div>
)
}
export default Button;
Any idea how I might achieve what I'm aiming for?
Thank you for the help.
That's most probably due to the buttons having fixed width.
I'd suggest adding a responsive variant for the .container
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#media only screen and (min-width: 600px) {
.container {
flex-direction: row;
}
}
This will make the buttons fall one below the other.
Please use flex-wrap: wrap
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.item {
width: 100px;
height: 50px;
margin: 5px;
background: #000000;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
Use display flex for responsiveness and percentages for element widths:
body{
width:100%;
height: 100vh;
display:flex;
justify-content: center;
align-items: center;
}
.container{
width:100%;
height:100px;
display:flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
}
.d1,.d2,.d3,.d4,.d5{
width:100px;
height:100px;
border:2px solid black;
}
<div class="container">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</div>
Ok so first I'd like to thank everyone for their responses, but the solution that I needed was in fact aspect-ratio:
.button {
width: 80%;
aspect-ratio: 1 / 1;
}
.container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 5%;
width: 90vw;
gap: 3.5%;
}
counter.js
import "./Counter.css";
const Counter = (props) => {
return (
<div className="counter">
<h1>{`Counter ${props.count}`}</h1>
<div className="counter__buttons">
<button onClick={props.incrementCounter}>Increment</button>
<button onClick={props.decrementCounter}>Decrement</button>
</div>
</div>
);
};
Counter.css
.counter {
display: flex;
color: white;
align-items: center;
width: 100%;
height: 100%;
}
.counter > .counter__buttons > button {
color: black;
background-color: grey;
margin: 10px;
padding: 30px;
border: 0;
border-radius: 10px;
}
i want to move the buttons below counter and place the counter and buttons in the center of the page how to change it , display : flex in counter should not be removed
Would something like this work? You can set the flex-direction of a wrapping div to column and set the second div (in your case your buttons) back to flex-direction: row and finally just center it with margin: 0 auto.
<div id="wrap">
<div id="one">1</div>
<div id="two">2
<div id="three">3</div>
<div id="four">4</div>
</div>
</div>
#wrap {
display: flex;
flex-direction: column;
}
#two {
display: flex;
flex-direction: row;
margin: 0 auto;
}
Do you want something like this?
.page {
background: black;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
}
.counter {
display: flex;
flex-direction: column; /* add this */
color: white;
align-items: center;
/* width: 100%;*/
/* height: 100%;*/
}
.counter > .counter__buttons > button {
color: black;
background-color: grey;
margin: 10px;
padding: 30px;
border: 0;
border-radius: 10px;
}
<div class="page">
<div class="counter">
<h1>Counter 5</h1>
<div class="counter__buttons">
<button onClick={props.incrementCounter}>Increment</button>
<button onClick={props.decrementCounter}>Decrement</button>
</div>
</div>
</div>
If so, you can make your whole page a flex container and use justify-content and align-items just like you did it for the .counter.
(I did HTML instead of JSX so I could add the snippet easier... don't forget to make changes in your own code)
I'm trying to vertically/horizontally center my Title with the Subtitle directly beneath it. Here was my attempt:
html, body, h1 {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
As you can see, the subtitle is in the same line as the h1, I'm trying to get it to go beneath it. I've tried setting h1 to display: block; but that seems to not work when using display: flex on the container. Any help would be appreciated.
Set flex-direction: column on container
html, body, h1 {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
Setting flex-direction to column is one solution. It's already provided in another answer.
In some cases, if flex-direction: row is preferred (or a necessity), you can add flex-wrap: wrap to the container and give the first item a 100% width, which forces the second item to the next line.
body, h1 {
margin: 0;
padding: 0;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
flex-wrap: wrap; /* NEW */
align-content: center; /* NEW */
text-align: center; /* NEW */
}
h1 { flex: 0 0 100%; } /* NEW */
<div id="container">
<h1>Main Title</h1>
<span>Subtitle</span>
</div>
I have a div that is displayed as flex. Inside the div are 3 other elements. I would like that the first element has 100% width and the 2nd and 3rd element should stay beside each other.
Sample code:
Codepen
#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
.fullwidth {
background-color: yellow;
}
<div id="flex-container">
<div class="fullwidth">full swidth</div>
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
Here I want to achieve that the yellow div (class = fullwidth) is 100% and above the 2 other elements, without changing the HTML and skipping flex.
Is there a way to achieve this properly?
You can use flex-wrap: wrap on Flex-container and flex: 0 0 100% on div you want to take full-width. Also to make other div's equal width you can use flex: 1
* {
box-sizing: border-box;
}
#flex-container {
font-family: Consolas, Arial, sans-serif;
display: flex;
flex-wrap: wrap;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
flex: 1;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
#flex-container > div.fullwidth {
background-color: yellow;
flex: 0 0 100%;
}
<div id="flex-container">
<div class="fullwidth">full swidth</div>
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>