I'm trying to make a container element, a flex item, the same width as it's span text child. As you can see by inspecting the result from the snippet, although the container .calc-text-container takes up more space than the child element does, even though the flex-grow-property is set to 0.
Is there a way to achieve the desired result?
.calc {
width: 230px;
background: green;
height: 100px;
display: flex;
justify-content: center;
flex-direction: column;
}
.calc a {
display: flex;
justify-content: center;
}
.calc-icon-container {
margin-right: 1em;
}
.calc-text-container {
flex: 0 0 0;
background: rgba(20,200,0,0.8);
}
<div class="calc">
<a href="#">
<div class="calc-icon-container"><span class="calc-icon">🔫</span></div>
<div class="calc-text-container"><span class="calc-text">To do something megagiga</span></div>
</a>
</div>
Just flex: 0 0 0; will do the job.
.calc {
width: 230px;
background: green;
height: 100px;
display: flex;
justify-content: center;
flex-direction: column;
}
.calc a {
display: flex;
justify-content: center;
}
.calc-icon-container {
margin-right: 1em;
}
.calc-text-container {
flex: 0 0 0; // or just flex: 0;
background: rgba(20,200,0,0.8);
}
<div class="calc">
<a href="#">
<div class="calc-icon-container"><span class="calc-icon">🔫</span></div>
<div class="calc-text-container"><span class="calc-text">Reallylongword Short shortandlong</span></div>
</a>
</div>
Related
I am trying to create a basic slider with 3 slides. The idea is to show the second slide on initial view, if the user swipes left, the slider will show the first slide, if the user swipes right it will show the right slide.
I have the initial slider working but I can't centre it. If I use justify-content on the main wrapper, I'm unable to slide to the first slide.
Here's the code
body {
-webkit-overflow-scrolling: touch;
}
.wrapper {
scroll-snap-type: x mandatory;
scroll-padding: 0px;
scroll-padding-left: 0px;
display: flex;
overflow-x: scroll;
height: 400px;
width: 100vw;
/* justify-content: center; */
}
::-webkit-scrollbar {
display: none;
}
.item {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 calc(100vw);
height: 400px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-transform: uppercase;
color: whitesmoke;
font-size: 64px;
}
.item-a {
background-color:green;
flex: 0 0 calc(150px);
}
.item-b {
background-color:red;
}
.item-c {
background-color:blue;
flex: 0 0 calc(150px);
}
<main>
<div class="wrapper">
<div id="item-a" class="item item-a">a</div>
<div id="item-b" class="item item-b">b</div>
<div id="item-c" class="item item-c">c</div>
</div>
</main>
justify-content: center;
with
justify-content: space-between;
I think shoud work for your example.
here is an explaination from developer mozilla site
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)
This question already has an answer here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
Closed 4 years ago.
enter code hereI can't really explain it better than this code example.
https://codepen.io/anon/pen/BYeger
I want to make #thing_down_here touch #thing_up_here, but I can't figure out the right combination.
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
You need to use use the align-content property to set the distribution along the cross-axis.
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
Read more about align-content.
Add align-content: flex-start to #parent
This defines the default behaviour for how flex items are laid out along the cross axis on the current line. Think of it as the justify-content version for the cross-axis (perpendicular to the main-axis).
flex-start: cross-start margin edge of the items is placed on the cross-start line
The default is stretch which is causing your issue
More on it at https://css-tricks.com/snippets/css/a-guide-to-flexbox/
html, body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box
}
#parent {
width: 100vw;
height: 100vh;
background: cornsilk;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
}
#thing_up_here {
flex: 1 0 100%;
background: skyblue;
height: 80px;
}
#thing_down_here {
flex: 0 0 50%;
background: lightgreen;
height: 100px;
}
<div id="parent">
<div id="thing_up_here"></div>
<div id="thing_down_here"></div>
</div>
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>
Hello fellow programmers!
I've got a simple box-layout which I would love to achieve using flexbox, but I simply can't figure it out. It should look like this image.
So basically a row and two columns, with the row being fixed at lets say 100px in height, but all in one container. My code so far is:
#productShowcaseContainer {
display: inline-flex;
flex-flow: row wrap;
height: 600px;
width: 580px;
background-color: rgb(240, 240, 240);
}
#productShowcaseTitle {
display: inline-block;
height: 100px;
width: 100%;
background-color: rgb(200, 200, 200);
}
#productShowcaseDetail {
flex: 3;
background-color: red;
}
#productShowcaseThumbnailContainer {
flex: 2;
background-color: blue;
}
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>
<div id="productShowcaseDetail"></div>
<div id="productShowcaseThumbnailContainer"></div>
</div>
I know this can be achieved in many ways, but I would really prefer to use CSS Flex.
You've almost done it. However setting flex: 0 0 <basis> declaration to the columns would prevent them from growing/shrinking; And the <basis> parameter would define the width of columns.
In addition, you could use CSS3 calc() expression to specify the height of columns with the respect to the height of the header.
#productShowcaseTitle {
flex: 0 0 100%; /* Let it fill the entire space horizontally */
height: 100px;
}
#productShowcaseDetail,
#productShowcaseThumbnailContainer {
height: calc(100% - 100px); /* excluding the height of the header */
}
#productShowcaseContainer {
display: flex;
flex-flow: row wrap;
height: 600px;
width: 580px;
}
#productShowcaseTitle {
flex: 0 0 100%; /* Let it fill the entire space horizontally */
height: 100px;
background-color: silver;
}
#productShowcaseDetail {
flex: 0 0 66%; /* ~ 2 * 33.33% */
height: calc(100% - 100px); /* excluding the height of the header */
background-color: lightgray;
}
#productShowcaseThumbnailContainer {
flex: 0 0 34%; /* ~ 33.33% */
height: calc(100% - 100px); /* excluding the height of the header */
background-color: black;
}
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>
<div id="productShowcaseDetail"></div>
<div id="productShowcaseThumbnailContainer"></div>
</div>
(Vendor prefixes omitted due to brevity)
Alternatively, if you could change your markup e.g. wrapping the columns by an additional <div> element, it would be achieved without using calc() as follows:
<div class="contentContainer"> <!-- Added wrapper -->
<div id="productShowcaseDetail"></div>
<div id="productShowcaseThumbnailContainer"></div>
</div>
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 600px; width: 580px;
}
.contentContainer { display: flex; flex: 1; }
#productShowcaseDetail { flex: 3; }
#productShowcaseThumbnailContainer { flex: 2; }
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 600px;
width: 580px;
}
.contentContainer {
display: flex;
flex: 1;
}
#productShowcaseTitle {
height: 100px;
background-color: silver;
}
#productShowcaseDetail {
flex: 3;
background-color: lightgray;
}
#productShowcaseThumbnailContainer {
flex: 2;
background-color: black;
}
<div id="productShowcaseContainer">
<div id="productShowcaseTitle"></div>
<div class="contentContainer"> <!-- Added wrapper -->
<div id="productShowcaseDetail"></div>
<div id="productShowcaseThumbnailContainer"></div>
</div>
</div>
(Vendor prefixes omitted due to brevity)
Just use another container to wrap last two divs.
Don't forget to use CSS prefixes.
#productShowcaseContainer {
display: flex;
flex-direction: column;
height: 600px;
width: 580px;
background-color: rgb(240, 240, 240);
}
#productShowcaseTitle {
height: 100px;
background-color: rgb(200, 200, 200);
}
#anotherContainer{
display: flex;
height: 100%;
}
#productShowcaseDetail {
background-color: red;
flex: 4;
}
#productShowcaseThumbnailContainer {
background-color: blue;
flex: 1;
}
<div id="productShowcaseContainer">
<div id="productShowcaseTitle">1</div>
<div id="anotherContainer">
<div id="productShowcaseDetail">2</div>
<div id="productShowcaseThumbnailContainer">3</div>
</div>
</div>
This is copied from above, but condensed slightly and re-written in semantic terms. Note: #Container has display: flex; and flex-direction: column;, while the columns have flex: 3; and flex: 2; (where "One value, unitless number" determines the flex-grow property) per MDN flex docs.
#Container {
display: flex;
flex-direction: column;
height: 600px;
width: 580px;
}
.Content {
display: flex;
flex: 1;
}
#Detail {
flex: 3;
background-color: lime;
}
#ThumbnailContainer {
flex: 2;
background-color: black;
}
<div id="Container">
<div class="Content">
<div id="Detail"></div>
<div id="ThumbnailContainer"></div>
</div>
</div>