This question already has answers here:
CSS when inline-block elements line-break, parent wrapper does not fit new width
(2 answers)
Make container shrink-to-fit child elements as they wrap
(4 answers)
Closed last month.
I'm trying to get a layout where two links next to each other break to their min-width, if and only if there is not enough space for them to display on one line.
Here you can see the elements are wider than their content:
If I set width: min-content, I get the desired result, the link elements are as wide as their content:
BUT if there's more space, they are of course still displayed like that (what I don't want):
How could I solve this? On line break case having an element width same as the actual content?
a {
display: inline-block;
}
.min-content a {
margin-top: 20px;
width: min-content;
}
a:first-child {
border: 1px solid green;
margin-right: 10px;
}
a:last-child {
border: 1px solid yellow;
}
.wrapper {
width: 200px;
bordeR: 1px solid red;
display: flex;
padding: 5px;
}
.long {
width: 400px;
margin-top: 20px;
}
<div class="wrapper">
<a>linklink linklink 1</a>
<a>linklink linklink 3</a>
</div>
<div class="wrapper long">
<a>linklink linklink 1</a>
<a>linklink linklink 3</a>
</div>
<br/><br/>
min-content:
<div class="wrapper long min-content">
<a>linklink linklink 1</a>
<a>linklink linklink 3</a>
</div>
Related
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 2 years ago.
I devide the div into two parts, and achieve with Flex Box in each part.
<!--My Trials-->
<body>
<div>
<div class="container1" style="display: flex;">
<div class="item1" style="flex:1;background-color: yellowgreen;">1</div>
<div class="item1" style="flex:1;background-color: lightseagreen;">2</div>
<div class="item1" style="flex:1;background-color: palevioletred">3</div>
</div>
<div class="container2" style="display: flex;">
<div class="item2" style="flex:1;background-color: lightskyblue;">4</div>
<div class="item2" style="flex:2;visibility: hidden;">5</div><!-- hide the 5th div -->
</div>
</div>
</body>
I wonder how to turn each div into a square.
And Is there anyway can achive the layout without the help of the 5th div?
.container {
display: flex;
flex-wrap: wrap;
}
.item1 {
height: 100px;
width: 33%;
background-color: lightblue;
color: black;
}
.item2 {
height: 100px;
width: 33%;
background-color: lawngreen;
color: black;
}
.item3 {
height: 100px;
width: 33%;
background-color: pink;
color: black;
}
.item4 {
height: 100px;
width: 33%;
background-color: orange;
color: black;
}
<body>
<div class="container">
<div class="item1">This is square 1</div>
<div class="item2">This is square 2</div>
<div class="item3">This is square 3</div>
<div class="item4">This is square 4</div>
</div>
</body>
The flex-wrap property allows elements to move to the next row when there is no more space on the current row. Making it completely responsive. And the width property is set to take up 33% of the view port window at all times.
Let me know if that works or if you need help with anything.
This question already has answers here:
Fill the remaining height or width in a flex container
(2 answers)
How to make a div fill a remaining horizontal space?
(26 answers)
Closed 3 years ago.
.parent {
display: flex;
}
.first {
width: 100px;
}
.second {
display: flex;
}// This is also flex parent div
<div class="parent">
<div class="first">first</div>
<div class="second">second
<div></div>
<div></div>
</div>
</div>
How to expand the second div to the rest? I don't want to use calc for second div style.
Add flex:1 to the .second div (borders included to show the actual size)
.parent {
display: flex;
}
.first {
width: 100px;
border: 1px green solid;
}
.second {
flex: 1;
border: 1px red solid;
display: flex;
}
<div class="parent">
<div class="first">first</div>
<div class="second">second</div>
</div>
This will set the flex-grow property to 1
Use flex property value to 1 for .second class. This will fit the second div to rest of width.
.parent {
display: flex;
}
.first {
width: 100px;
border: 1px solid black;
}
.second {
flex: 1;
border: 1px solid black;
}
<div class="parent">
<div class="first">first</div>
<div class="second">second
<div></div>
<div></div>
</div>
</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
I would like to have different margin for span elements. E.g., margin-top: 25px should be for the first span element and margin-top: 15px should be for the second element :
<div style="background: green">
<span style="display: inline-block; margin-top: 25px;">1</span>
<span style="display: inline-block; margin-top: 15px;">2</span>
</div>
However, the second span has margin-top: 25px.
Is it possible to set different margin-top for both span elements?
You need to put vertical-align: top. By default inline-block elements will sink to the level of their siblings.
Just to show they do have I added a border and put a flex display on the container thing. This also depends on how you want it visually. I added a second example where it moves without changing the border contained size.
.thing {
display: flex;
background: green
}
.thing-span {
display: inline-block;
border: yellow 1px solid;
}
.thing-span.one {
margin-top: 25px;
}
.thing-span.two {
margin-top: 15px;
}
<div class="thing">
<span class="thing-span one">1</span>
<span class ="thing-span two">2</span>
</div>
another way
.thing {
background: green
}
.thing-span {
display: inline-block;
border: yellow 1px solid;
vertical-align:top;
}
.thing-span.one {
margin-top: 25px;
}
.thing-span.two {
margin-top: 15px;
}
<div class="thing">
<span class="thing-span one">1</span>
<span class ="thing-span two">2</span>
</div>
This question already has answers here:
Is it possible for flex items to align tightly to the items above them?
(5 answers)
Make a div span two rows in a grid
(2 answers)
Closed 5 years ago.
I'm trying to float two elements at the right of a "figure" element using flex but it end up floating just div1 at the right of figure and div2 is moved bellow, if I make div1 and div2 narrow enough, they are floated inline at the right of figure.
This is the CSS:
.container {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
Desired Result:
Actual Result:
How it works?
First, you make a flex-container (flexc in this case) and apply the display:flex property on it which aligns the elements by default in row alignment. If you want an element to preserve its dimensions set it to flex:0 0 auto; else you can make use of flex:1; which shrinks or grows as the browser is resized.
Then to align the contents in column (div1 and div2) you can just wrap then in a different container and since div isn't an inline container, and the flex property doesn't have any effect on any other than the direct children of the flex parent, they are aligned in seperate lines.
.flexc {
display: flex;
justify-content: flex-start;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
<div class="flexc">
<div id="fig">Figure</div>
<div class="col">
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
</div>
Without altering the html:
.flexc {
display: flex;
flex-direction:column;
position:relative;
}
#fig {
flex: 0 0 auto;
width: 200px;
height: 200px;
background: gray;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d1,
#d2 {
position:absolute;
left:250px;
width: 200px;
height: 50px;
background: purple;
text-align: center;
color: white;
margin: 10px;
border: 2px solid black;
}
#d2{
top:70px;
}
<div class="flexc">
<div id="fig">Figure</div>
<div id="d1">div1</div>
<div id="d2">div2</div>
</div>
Not sure what your HTML looks like, but display: flex is best used on the container wrapping all the elements you want aligned. Imagine it to be the largest box that you put smaller boxes inside.
Codepen example demonstrating this: https://codepen.io/corviday/pen/VyYdar
Following this hierarchy with .container as your largest box, since you want two columns, you can divide it further into two smaller boxes (.left in red and .right in blue in this case).
From there you would need to group div1/div2 together to float the way you'd like, and would be the items that fill the box .right.
You can use Bootstrap to resolve or put div1 and div2 in one div main to drop div main
Bootstrap exemple
<div class='container'>
<div class="col-md-12">
<div class="col-md-6">
1 text
</div>
<div class="col-md-6">
<div class="col-md-6">
2 text
</div>
<div class="col-md-6">
3 text
</div>
</div>
</div>
</div>
I think the best layout engine to use for your use case is hinted at in your description of the problem: Floats.
Here is a solution that doesn't require you to alter your html.
<div class="container">
<div class="medium-box">figure</div>
<div class="small-box">div 1</div>
<div class="small-box">div 2</div>
</div>
.container{
width: 500px;
}
.medium-box {
height: 200px;
width: 200px;
margin: 10px;
background: grey;
float:left
}
.small-box {
float:left;
height: 30px;
width: 200px;
background: blue;
margin: 10px;
}
https://codepen.io/stacyvlasits/pen/aVPZbY
I have a div with some number of spans in it, that may or may not be of equal width. I know I can use text-align: center to make all the content within a div be centered. However, I want to pick a particular span, and designate that as the true center, rather than the center being the midpoint of the sequence of spans.
One idea I had to simulate this effect was: I'd have my desired middle element with two containers to its left and right; the left one would be right-justified, and vice-versa. These containers would hold the other content in the div. If I could get these two containers to fill up the remaining space in equal amounts, this would have the effect of centering the middle element while keeping the left and right content aligned with the center. Basically, this would require the two containers' width to be set to exactly half the remaining space in the div. (I don't want to change the size of the middle div.) Is this possible to do with just CSS?
Example: with 4 spans, how to I designate span 2 as the true center?
div {
width: 500px;
padding: 4px;
border: 1px dotted black;
}
span {
display: inline-block;
width: 100px;
text-align: center;
margin: 4px;
box-sizing: border-box;
border: 1px dotted black;
}
#b {
/* ??? */
}
<div>
<span id="a">1</span>
<span id="b">2</span>
<span id="c">3</span>
<span id="d">4</span>
</div>
You can use flexbox. Based on this answer,
.outer-wrapper {
display: flex;
padding: 4px;
border: 1px dotted black;
}
.item {
margin: 4px;
text-align: center;
border: 1px dotted black;
}
.left.inner-wrapper, .right.inner-wrapper {
flex: 1;
display: flex;
align-items: flex-start;
min-width: -webkit-min-content; /* Workaround to Chrome bug */
}
.left.inner-wrapper {
justify-content: flex-end;
}
.animate {
animation: anim 5s infinite alternate;
}
#keyframes anim {
from { min-width: 0 }
to { min-width: 50vw; }
}
<div class="outer-wrapper">
<div class="left inner-wrapper">
<div class="item animate">1. Left</div>
</div>
<div class="center inner-wrapper">
<div class="item">2. Center</div>
</div>
<div class="right inner-wrapper">
<div class="item">3. Right</div>
<div class="item">4. Right</div>
</div>
</div>
<!-- Analogous to above --> <div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item animate">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item animate">3. Right</div><div class="item">4. Right</div></div></div><div class="outer-wrapper"><div class="left inner-wrapper"><div class="item">1. Left</div></div><div class="center inner-wrapper"><div class="item">2. Center</div></div><div class="right inner-wrapper"><div class="item">3. Right</div><div class="item animate">4. Right</div></div></div>
This will attempt to center the desired element, but it will be pushed in case one side doesn't fit, to prevent overlapping.
This can be done using flexbox. You can use display:flex; on the div, and use flex-grow:1; on the 2nd span. That way you can cover the whole div with that span.
Since the 1st and 3rd spans are already equal in width, you'll have the 2nd span in dead center. And then use flex-basis on the 2nd to get it's desired width.
div.container{
width: 500px;
padding: 4px;
border: 1px dotted black;
}
div.row{
display:flex;
align-items:center;
justify-content:center;
}
span {
display: inline-block;
width: 70px;
text-align: center;
margin: 4px;
box-sizing: border-box;
border: 1px dotted black;
transform:translate(50%,0);
}
#b {
}
<html>
<head></head>
<body>
<div class='container'>
<div class="row">
<span id="a">1</span>
<span id="b">2</span>
<span id="c">3</span>
<span id="d">4</span>
</div>
</div>
</body>
</html>
I suggest to do it with a 3 column layout, and use CSS table structure. Make the 1st and 3rd columns to take 50% of total width, and middle column will have only 0, but it will recalculate the width to fit the content and remains center since it's in a table.
Also put white-space: nowrap; there in case there are multiple words inside, but remove it as needed if there is only one word or fixed width.
.container {
display: table;
border-collapse: collapse;
width: 100%;
}
.item {
display: table-cell;
vertical-align: top;
padding: 4px;
border: 1px solid grey;
}
.item-a {
width: 50%;
text-align: right;
}
.item-b {
text-align: center;
white-space: nowrap; /* remove as needed */
}
.item-c {
width: 50%;
}
.item span {
display: inline-block;
border: 1px solid red;
}
.item-b span {
padding: 0 50px; /* for demo only */
}
<div class="container">
<span class="item item-a">
<span>1</span>
</span>
<span class="item item-b">
<span>2</span>
</span>
<span class="item item-c">
<span>3</span>
<span>4</span>
</span>
</div>
jsFiddle