Is there a way to prevent stretching on both axis of CSS Flex? In the example below, I want the the option and box layers to adjust to the width and height of the children. Additionally, I want the box to be in the middle of the page.
I am aware of flex-grow and basis, but my understanding is it only manages the space of the main axis.
.container {
background-color: red;
display: flex;
justify-content: center;
}
.box {
display: flex;
flex-basis: 0;
background-color: green;
justify-content: center;
}
.option {
display: flex;
flex-direction: column;
align-items: center;
background-color: yellow;
}
.img-container {
background-color: blue;
}
.img-container img {
max-width: 100%;
}
<div class="container">
<div class="box">
<label class="option">
Option 1
<div class="img-container">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=640:*" />
</div>
</label>
<label class="option">
Option 2
<div class="img-container">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dog-puppy-on-garden-royalty-free-image-1586966191.jpg?crop=0.752xw:1.00xh;0.175xw,0&resize=640:*" />
</div>
</label>
</div>
</div>
Related
I have this on my codepen in which I was using flex to align items. What I want is to align items even with or without labels.
here is my html code:
<div class="parent-main">
<div class="child1">
<!--<label>checkbox</label> -->
<input type="text"/>
</div>
<div class="child2">
<label>checkbox</label>
<input type="checkbox"/>
</div>
<div class="child3">
<label>checkbox</label>
<input type="radio"/>
</div>
</div>
my css:
.parent-main {
display: flex;
justify-items: center;
border: solid 1px #ccc;
width: 55vh;
height: 25vh;
margin: 5px;
padding: 15px;
gap: 2px;
}
.child1 {
display: flex;
flex-direction: column;
/* position: relative;
top: 2px; */
}
.child2 {
display: flex;
flex-direction: column;
align-items: baseline;
}
.child3 {
display: flex;
flex-direction: column;
align-items: baseline;
}
Here is my codepen link: enter link description here
This is quite tricky on my side but I hope I can have your insights on this, been working this for 2 days now.
As you want to align the input of type "text" with the other div siblings but without it having any label element, we use a line break in order to mimic an empty blank space without any text element in it by using either <br> or
Tip:
Avoid duplication of codes in CSS properties, see the below snippet
.parent-main {
display: flex;
justify-items: center;
border: solid 1px #ccc;
width: 55vh;
height: 25vh;
margin: 5px;
padding: 15px;
gap: 2px;
}
.parent-main>div {
display: flex;
flex-direction: column;
}
.child2,
.child3 {
align-items: baseline;
}
<div class="parent-main">
<div class="child1">
<!--empty space -->
<br>
<!-- can also be used -->
<input type="text" />
</div>
<div class="child2">
<label>checkbox</label>
<input type="checkbox" />
</div>
<div class="child3">
<label>checkbox</label>
<input type="radio" />
</div>
</div>
This question already has answers here:
Centered elements inside a flex container are growing and overflowing beyond top [duplicate]
(3 answers)
Closed 2 years ago.
I created this css snippet.
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
height: calc(100vh - 50px);
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
I set 100vh to have the page 100% of page height, but appears the next issue when i resize the page vertically:
How you can see the image goes over the header, but it should stop when is near header like:
Question: Why it is happening and how to solve this?
Make it a habit for yourself to wrap all the divas in the main div:
<div class="main">
...
</div>
When this main div is absent in the structure of html, then problems may arise in the future.
I made some changes to the css. If you have any questions, then ask me.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
}
.header {
background-color: red;
padding: 25px;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
When you resize the page vertically, the image goes over the header because the div "container__inner" and the div "container__img" have height: auto (by default). That means their height will be equal to the maximum height of the elements inside (here is the img).
To solve this problem, you just need to set height: 100% for one of them. Then its height will not exceed the height of the parent element (the div "container")
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.main {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
flex: auto;
}
.container__img {
display: flex;
flex-direction: column;
text-align: center;
}
.header {
background-color: red;
padding: 25px;
text-align: center;
}
<div class="main">
<div class="header">HEADER</div>
<div class="container">
<div class="container__inner">
<div class="container__img">
HELLO
<img src="https://cdn.pixabay.com/photo/2017/08/30/01/05/milky-way-2695569__340.jpg" />
</div>
</div>
</div>
</div>
I'm wondering why any image I put in this div container with display flex is automatically stretched out? And if I were to set a width for it, I can't center it with justify-content.
#container {
display: flex;
justify-content: center;
}
#container div {
padding: 25px;
background: blue;
color: white;
width: 500px;
display: flex;
flex-direction: column;
}
#container div h1 {
display: flex;
justify-content: center;
}
#container input,
#container button {
width: 75%;
}
#container img {
display: flex;
justify-content: center;
}
<div id="container">
<div>
<h1>a</h1>
<img src="https://placehold.it/350x150">
<input type="text" name="a">
<input type="text" name="b">
<button>a</button>
</div>
</div>
https://jsfiddle.net/nqt8bw4z/ auto stretch
https://jsfiddle.net/nqt8bw4z/2/ fixed width but doesn't center
An initial setting of a flex container is align-items: stretch. This means that flex items will expand the full length of the container's cross axis. That would be the container's height in flex-direction: row, and width in flex-direction: column.
Since you're working with a column-direction flex container, the image is stretching horizontally by default. You can override this setting with another value. Try align-items: flex-start or center.
#container {
display: flex;
justify-content: center;
}
#container div {
display: flex;
flex-direction: column;
align-items: center; /* NEW */
width: 500px;
padding: 25px;
background: blue;
color: white;
}
#container div h1 {
display: flex;
justify-content: center;
}
#container input,
#container button {
width: 75%;
}
#container img {
display: flex;
justify-content: center;
}
<div id="container">
<div>
<h1>
a
</h1>
<img src="http://placehold.it/350x150" />
<input type="text" name="a" />
<input type="text" name="b" />
<button>
a
</button>
</div>
</div>
In addition to the answer of #Michael_B your code can be simplifed like below as you don't need all these flexbox properties.
#container div {
padding: 25px;
background: blue;
color: white;
width: 500px;
margin:auto;
display: flex;
flex-direction: column;
align-items:center;
}
#container input,
#container button {
width: 75%;
}
<div id="container">
<div>
<h1>a</h1>
<img src="https://placehold.it/350x150">
<input type="text" name="a">
<input type="text" name="b">
<button>a</button>
</div>
</div>
I ceated a flexbox grid and tried to make each item the same hight which is not working. Basically all those blue containers shall have the same height.
HTML:
<div class="outer">
<div class="item">
<h1>Contact</h1>
</div>
<div class="item">
<h3>Mail:</h3>
<a>john#doe.com</a>
<br>
<a>PGP</a>
</div>
<div class="item">
<h3>Telegram:</h3>
<a>www.t.me/doe</a>
</div>
</div>
CSS:
.outer {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
height: 100vh;
width: 100vw;
}
.item {
background-color: aqua;
flex: 1;
}
Photo:
I would add another element that is the only flex child of .outer, centered vertically, with the background applied to it, then make that element the flex parent that holds your 3 sections and aligns them.
.outer, .inner {
display: flex;
align-items: center;
}
.outer {
height: 100vh;
width: 100vw;
}
.inner {
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
flex: 1 0 0;
background-color: aqua;
}
.item {
flex: 1;
}
<div class="outer">
<div class="inner">
<div class="item">
<h1>Contact</h1>
</div>
<div class="item">
<h3>Mail:</h3>
<a>john#doe.com</a>
<br>
<a>PGP</a>
</div>
<div class="item">
<h3>Telegram:</h3>
<a>www.t.me/doe</a>
</div>
</div>
</div>
I was playing around with the flexboxes a little and wanted to combine a column and row container. The question I have is:
Why do the row elements placed within the column not span the entire width of the flex-container?
The example code is shown here: js-fiddle
HTML:
/* CSS: */
.flex-container {
color: blue;
background-color:yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content:space-between;
align-items:center;
}
.horizontal {
flex-direction:row;
background-color: red;
}
.vertical {
flex-direction:column;
}
<body>
<div class="flex-container vertical">
<div class=flex-item>1 </div>
<div class=flex-item>2 </div>
<div class="flex-container horizontal" >
<div class=flex-item>3a </div>
<div class=flex-item>3b </div>
<div class=flex-item>3c </div>
</div>
<div class=flex-item>4 </div>
<div class=flex-item>5 </div>
</div>
</body>
Thanks for any help!
This is because of the way Flexbox works.
Since the .horizontal container is a flex child itself, it automatically adjusts to the size of the other children. Only allowing space for the overflowing content, which are the children of the .horizontal itself.
Manually applying the width will result in the space being created for the items, and the justify-content: space-between will kick in.
Solution, change the following rule:
.horizontal {
flex-direction: row;
background-color: red;
width: 100%;
}
Since you have set align-items:center; on the flex container, in addition to being centered - the items also only take up the minimum amount of space that they need.
If you hadn't set this property - then the default value of stretch would have kicked in and the items would take up the full width.
Then, like #Michael_B pointed out you could apply align-self:center on the flex items to center the items on the cross axis.
.flex-container {
color: blue;
background-color: yellow;
text-decoration: bold;
text-size: 1em;
display: flex;
justify-content: space-between;
}
.horizontal {
flex-direction: row;
background-color: red;
}
.vertical {
flex-direction: column;
}
.flex-item {
align-self: center;
/* center each flex item along the cross axis */
text-align: center;
/* horizontally center content within flex item */
}
<body>
<div class="flex-container vertical">
<div class=flex-item>1 </div>
<div class=flex-item>2 </div>
<div class="flex-container horizontal">
<div class=flex-item>3a </div>
<div class=flex-item>3b </div>
<div class=flex-item>3c </div>
</div>
<div class=flex-item>4 </div>
<div class=flex-item>5 </div>
</div>
</body>
Adding width: 100% to your horizontal flexbox and flex: 1 to the items within it I got this:
body {
background-color: black
}
.flex-container {
color: blue;
background-color: yellow;
display: flex;
justify-content: space-between;
align-items: center;
}
.horizontal {
flex-direction: row;
background-color: red;
width: 100%; /*this line was added*/
}
/*these lines*/
.horizontal .flex-item {
flex: 1;
}
/*ware added*/
.vertical {
flex-direction: column;
}
.flex-item {
background: tomato;
padding: 5px;
width: 100px;
height: 75px;
margin: 5px;
line-height: 75px;
color: white;
font-size: 3em;
text-align: center;
}
<body>
<div class="flex-container vertical">
<div class="flex-item">1 </div>
<div class="flex-item">2 </div>
<div class="flex-container horizontal">
<div class="flex-item">3a</div>
<div class="flex-item">3b</div>
<div class="flex-item">3c</div>
</div>
<div class="flex-item">4</div>
<div class="flex-item">5</div>
</div>
</body>