This question already has answers here:
What's the difference between display:inline-flex and display:flex?
(10 answers)
Closed 5 years ago.
If you are using a Flexbox layout to layout some items in a row, the Flexbox container takes up the full width of whatever container it is in. How do you set the Flexbox container to only take up the width of it's child elements?
Take a look at the following example:
https://jsfiddle.net/5fr2ay9q/
In this example the size of the flexbox container extends beyond the child element's width. The typical way to fix something like this is display: inline but obviously that won't work because then it's not a flexbox container anymore.
Is it possible to do this?
.container {
display: flex;
flex-direction: row;
outline: 1px solid red;
}
p {
outline: 1px solid blue;
}
Can you make the flex container not 100% width but rather the width of the content itself?
<div class='container'>
<img src='https://placehold.it/300x300'/>
<p>
This is some content hello world testing 123.
</p>
</div>
You can use display: inline-flex; (see Designating a Flexible Box):
.container {
display: inline-flex;
flex-direction: row;
outline: 1px solid red;
}
p {
outline: 1px solid blue;
}
Can you make the flex container not 100% width but rather the width of the content itself?
<div class='container'>
<img src='https://placehold.it/300x300'/>
<p>
This is some content hello world testing 123.
</p>
</div>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 11 months ago.
I have an html container element which has children, some of which are of the css class child-active.
The container should only be as tall as the largest active child. i.e. I want a container's max-height to always be the largest height of its children which are of the class child-active. (The reason I want this is because it would solve a css transition issue for me).
I want something like:
.container {
max-height: calc(max(/* all the heights of .container > .child-active*/));
}
.child {
...
}
.child-active {
...
}
<div class="container">
<div class="child"> the height of this content is ignored </div>
<div class="child child-active"> the height of this content sets the height of the container </div>
</div>
Is this possible to do? Obviously I anticipate it will involve JavaScript.
Does having the .container element to be display:flex not solve the problem?
Otherwise, container queries might be worth checking out.
The simplest way would be to define the height of the child-active and use that same height as max-height for container, otherwise try playing around with max-height: max-content or max-height: auto or max-height: fit-content;
Or use display: flex, define the heights of child and active child and that should be it.
.container {
display: flex;
border: 1px solid red;
}
.child {
height: 20px;
border: 1px solid blue;
}
.child-active {
height:40px;
border: 1px solid green;
}
<div class="container">
<div class="child"> the height of this content is ignored </div>
<div class="child child-active"> the height of this content sets the height of the container </div>
</div>
This question already has answers here:
Targeting flex items on the last or specific row
(10 answers)
Closed 2 years ago.
I'm creating a nav menu using flex. I want all of the items in my menu to display in a single row when the screen is wide enough to support that, and to snap to two rows of items when it needs to wrap. I have this mostly working:
.content {
width: 400px;
height: 150px;
border: thin solid black;
}
.outer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.inner {
display: flex;
justify-content: space-around;
flex-grow: 1;
}
span {
font-size: 24pt;
}
<div class="content">
<div class="outer">
<div class="inner">
<span>one</span>
<span>two</span>
<span>three</span>
</div>
<div class="inner">
<span>four</span>
<span>five</span>
<span>six</span>
</div>
</div>
</div>
CodePen here.
This works perfectly when the page is wide enough:
And it works mostly perfectly when the page is narrow (try changing the width of .content to 250px):
However, now I'm trying to make it so the items in each row line up with each other. I'm going for something like this:
I've tried every combination of flex-grow, flex-shrink, and justify-content that I can think of, but I can't get the items to align.
I know I could probably use a media query and swap out the content for a grid when the window gets too narrow, but I'd like to simplify this as much as possible. Is there a way to align the children of two flex divs?
Alternatively, is there a way to use a grid layout that shows as 1 row until it needs to wrap, and then it shows as 2 rows?
It causes by span width.
if span width not fixed, span will have dynamic width;
set width on span;
Try this
Add to te span
span {
flex: 33%;
}
Or change the porcent acording to the amount of items the div has
This question already has answers here:
How to have child div of a flex, have its children full height [duplicate]
(1 answer)
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I have been stuck on this and frankly don't even know how to google it, all my google efforts were fruitless. My HTML is as below:
<div class="uk-flex uk-flex-column uk-height-1-1">
<!-- normal div with height 100vh and flexbox of flex column -->
<div>div that will have height fit contents</div>
<div class="uk-flex-1">
<!-- div that will fill the remaining space -->
<div class="uk-height-1-1">div that should fill the height of the parent</div>
</div>
<div>div that will have height fit content</div>
</div>
Now my main problem is having the grand child div (.uk-height-1-1) to have its height fill the parent, how do I make its height fill the height of the parent div??
NOTE: The below links of questions I have been through them before, they do not answer my question
Fill remaining vertical space with CSS using display:flex
Make a div fill the height of the remaining screen space
UPDATE: Am using uikit, I posted the question initially the way it is to simplify the question, uk-height-1-1 = height: 100%
Best way to tackle something like this is assign borders to things when you are trying to see how the layout is
.viewport-height {
display: flex;
border: 1px solid blue;
height: 500px;
}
.flex-1 {
border: 1px solid red;
}
.full-height {
border: 1px solid greenyellow;
height: 100%;
}
If you look in the css above the .full-height is now the same height as the flex-1
If I understood your question, then this should be what you are looking for. Let me know if you need any additional help.
.viewport-height {
height: 100vh;
display: flex;
flex-direction: column;
}
.flex-1 {
display: flex;
flex: 1;
background-color: green;
align-items: center;
}
.div-with-height {
height: 50px;
}
full-height {
height: 100%;
}
<div class="viewport-height flex-column">
<!-- normal div with height 100vh and flexbox of flex column -->
<div class="div-with-height">div that will have height fit contents</div>
<div class="flex-1">
<!-- div that will fill the remaining space -->
<div class="full-height">div that should fill the height of the parent</div>
</div>
<div class="div-with-height">div that will have height fit content</div>
</div>
This question already has answers here:
One flex/grid item sets the size limit for siblings
(6 answers)
Closed 5 years ago.
With flexbox, the childs by default resize according to the widest element.
Is there some way to define that a particular child will control the width, even if it's smaller? With selectors maybe?
Codepen: https://codepen.io/dsomekh/pen/rwEYYE
Code:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.first {
border: 1px solid red;
margin-bottom: 0.5vw;
}
.second {
border: 1px solid red;
}
.wrapper {
font-family: Calibri;
display: flex;
flex-direction: column;
}
<html>
<div class="center">
<div class="wrapper">
<div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div>
<div class="second">This div is smaller.Can it control the width?</div>
</div>
</div>
</html>
Here's the important CSS rule to know:
flex: {number} {number} {number};
The third number is the default size of a flex-item (width, if the flex item is in a row). By default it is auto meaning a flex-item's default size is dictated by it's content.
The first and second numbers are proportionally how much it can grow or shrink by, respectively, compared to other flex items if there is room along the main axis (again, width if this flex item is in a row).
So, you cannot set the default size of a flex-item to be relative to a sibling's intrinsic size - i.e. that which is dictated by it's content - but you can set the default size of a flex-item (and it's sibling items) to all be the same and let them grow or shrink.
I find myself often doing the following:
flex: 1 0 0
on flex items which cause siblings to all be the same size.
All flex-items start out with a default size of 0 and they all grow equally - as given by the first number being the same for all flex items (here it's a one, but it could be any positive number as long as it's the same for every sibling) - as they need to.
Best flexbox learning around is here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT
If you knew, in advance, which item was going to be intrinsically bigger, you could probably do it by setting that item to flex: 0 0 auto and letting all other flex-item's grow from flex: 1 0 0, but I have a feeling you don't know in advance which one is bigger.
.wrapper { display: flex; }
.wrapper>div { border: 1px solid #000; }
.first { flex: 1 0 0; }
.second { flex: 0 1 auto; }
<div class="center">
<div class="wrapper">
<div class="first">This DIV is bigger. However, can it shrink according to it's brother?</div>
<div class="second">This div is smaller.Can it control the width?</div>
</div>
</div>
I have a .parent div and within that I have an unknown number of .child divs. I need the child divs to be in a vertical grid and all of them need to be equal height. Unfortunately, I can't use javascript for this.
I have tried different combinations of display: inline-block and float: left, but I can't get the children to be the same height.
I am able to achieve same height using display: table-cell but then I run into another problem that the children don't split onto multiple lines if the total width exceeds the container width.
Is there a way to do this with pure css? I only need to support IE10+ if that helps (flexbox?)
You can use a wrapping flexbox - see how the heights are auto-adjusted (due to the align-items:stretch property which is default) when the child divs wrap as you resize the window.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrapper {
display: flex;
flex-flow: row wrap;
}
.wrapper > div {
border: 1px solid red;
}
<div class="wrapper">
<div>
some text here some text here
</div>
<div>
some text here
<br/>more text here
</div>
<div>
some text here
<br/>more text here and some more and some more
</div>
<div>
some text here
<br/>more text here
<br/>more text here
</div>
</div>
Yes you could use flexbox.
.parent{
display: flex;
}
.child{
flex:1;
}
You could try using viewport units.
Something like this might work:
.child {
height: 1vw;
}
This will make the child elements have 1/100 of the viewport width.
To read more about viewport units
Viewport units support