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.
Using Flexbox I can not seem to make a div wrap to a new line without having it break with previous block content.
I made a codepen to explain:
.container {
left: 0;
right: 0;
margin: auto;
background-color: grey;
width: 800px;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.lightblue {
background-color: lightblue;
width: 300px;
height: 100px;
display: block;
}
.lightpink {
background-color: lightpink;
width: 300px;
height: 50px;
}
.red {
background-color: red;
width: 300px;
height: 50px;
}
body {
margin 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="lightblue"></div>
<div class="lightpink"></div>
<div class="red"></div>
</div>
What I want is for the red block to display inline, to the right of my lightblue block.
Can you tell me how to achieve this effect?
Thanks!
.container {
left: 0;
right: 0;
margin: auto;
background-color: grey;
width: 800px;
height: 100%;
display: flex;
flex-wrap: wrap;
}
.lightblue {
background-color: lightblue;
width: 300px;
height: 100px;
display: block;
}
.lightpink {
background-color: lightpink;
width: 300px;
height: 50px;
}
.red {
background-color: red;
width: 300px;
height: 50px;
}
body {
margin 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="lightblue" ></div>
<div>
<div class="lightpink" ></div>
<div class="red" ></div>
</div>
</div>
You just wrap .lightpink, .red in div.
You can achieve this by adding these 3 lines to your container.
flex-direction: column;
max-height: 100px;
align-content: flex-start;
See the fiddle for working example. https://jsfiddle.net/meercha/yn9gtnpc/1/
Related
How do I get the .top_box to be fixed in the head of the .content?
With the current code, the .top_box always scrolls along with the .content.
.wrapper {
height: 160px;
display: flex;
flex-direction: column;
}
.title_container {
background: pink;
}
.content {
height: 0;
flex: auto;
position: relative;
overflow-y: auto;
overflow-x: hidden;
background-color: bisque;
}
.top_box {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 16px;
background: royalblue;
}
.scroll_fill {
height: 500px;
}
<div class="wrapper">
<div class="title_container">anyString</div>
<div class="content">
<div class="top_box"></div>
<div class="scroll_fill"></div>
</div>
</div>
You can just change the order of the HTML-Elements in the code and write .top before .item. If you do that, you can also remove most of the CSS because it’s unnecessary.
Here‘s a full example:
.box1 {
height: 600px;
display: flex;
flex-direction: column;
}
.box2 {
background: pink;
}
.box3 {
background-color: red;
}
.top {
width: 300px;
height: 5px;
background: blue;
}
.item {
height: 1000px;
}
<div class="box1">
<div class="box2">anyString</div>
<div class="box3">
<div class="top"></div>
<div class="item"></div>
</div>
</div>
Also a few other things: I wouldnt recommend just using divs and naming them like box1, box2, box3, .... Instead, give them names wich describe their use and meaning like wrapper, top_container, bottom_container, top_item, content, ...:
CSS Naming Conventions.
You can also use specific tags with semantic meanings: Sematic HTML5 Elements
Hope that helps
.wrapper {
height: 160px;
display: flex;
flex-direction: column;
}
.title_container {
background: pink;
}
.content {
height: 0;
flex: auto;
position: relative;
overflow: hidden;
background-color: bisque;
}
.contentInner {
height: 100%;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
}
.top_box {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 16px;
background: royalblue;
}
.scroll_fill {
height: 500px;
}
<div class="wrapper">
<div class="title_container">anyString</div>
<div class="content">
<div class="top_box"></div>
<div class="contentInner">
<div class="scroll_fill"></div>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
Did try already several flex arguments but none of them worked like selg-align and self-content.
So the idea is the fit the image to the square and center it vertically and horizontally...
Does anybody can help with this thanks...
I am unsure of the why i need to edit this topic... it's just a simple question on how to fit the image in the square and center it vertically and horizontally (obvious to such square)... Don't understand where is the confusion about the question...
My examples is at https://jsfiddle.net/ej3814sn/
.five {
height: 20%;
border: 1px solid #fff;
}
.five-a {
float: left;
color: white;
}
.five-b {
float: right;
color: white;
}
Thanks in advance
You need to wrap your img in a div and outside of five - Using float is not a good idea at all in modern browsers.
Use flex to achieve your desired results and it is very responsive in modern browsers as well. Also set the height of .one to auto make sure img always centered and below the numbers.
Live Demo:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
width: 100px;
height: auto;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 20%;
display: flex;
justify-content: space-between;
}
.five-a {
color: white;
margin-left: 5px;
}
.five-b {
color: white;
margin-right: 5px;
}
img {
width: 90%;
height: auto;
}
.img-div {
display: flex;
justify-content: center;
align-items: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<div class="img-div">
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</div>
</body>
The best way, to position elements, is to use position property. Notice that I have made a change in HTML code as well. Put the image out of five element. Now talking about CSS, position both img and five as absolute. You would have to set top to 0, width to 100% for five. And for img, just set self-align to center.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
justify-content: center;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
position: relative;
}
.five {
height: 20%;
width: 100%;
position: absolute;
top: 0;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
img {
width: 90%;
position: absolute;
height: auto;
align-self: center;
}
/*fit image to the square and center it*/
<body>
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<div class="five-a">1</div>
<div class="five-b">10</div>
</div>
<img src="https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png">
</div>
</div>
</div>
</div>
</body>
I think you are looking to center the image in the .five div, yes?
EDIT: Remove the image tag and place your image as a background of the element you wish to center it in... Then add no-repeat, 0% to position and set the bg size to 100%, however change the height of the element to 100% as well...
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500;600&display=swap');
* {
font-family: 'Montserrat', sans-serif;
}
html,
body {
height: 100%;
width: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.one {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
background: #232323;
opacity: 0.9;
}
.two {
width: 50%;
}
.four {
float: left;
width: 100px;
height: 100px;
margin-left: 10px;
margin-top: 10px;
border: 2px solid #fff;
display: flex;
flex-direction: column;
}
.five {
height: 100%;
background-image: url(https://logodownload.org/wp-content/uploads/2015/04/whatsapp-logo-1-1.png);
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100%;
}
.five-a {
float: left;
color: white;
margin-left: 5px;
}
.five-b {
float: right;
color: white;
margin-right: 5px;
}
/*fit image to the square and center it*/
<div class="one">
<div class="two">
<div id="tree">
<div id="0" class="four">
<div class="five">
<span class="five-a">1</span>
<span class="five-b">10</span>
<img src="">
</div>
</div>
</div>
</div>
</div>
I have three elements currently vertically centered in a container through flex:
<div class="parent">
<div class="first">A</div>
<div class="second">B</div>
<div class="third">C</div>
</div>
with CSS:
.parent {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 800px;
}
Looking like:
I would like to change it so the first element is vertically centered and the other elements follow:
Ideally this could be done simply through flex but so far I cannot find a solution. Any help greatly appreciated.
If your elements have a fixed size, you could accomplish this with a wrapping div
which size is the same as the first element and let the following elements just overflow.
.parent {
height: 125px;
background-color: palegreen;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.item-container,
.item {
width: 200px;
height: 30px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
border: 1px solid red;
}
.second {
height: 50px;
}
<div class="parent">
<div class="item-container">
<div class="item first">A</div>
<div class="item second">B</div>
<div class="item third">C</div>
</div>
</div>
If you can change the HTML structure, it's possible: Put the second and third elements into a wrapper DIV and put that one into the first. Then center the first one (not necessarily with flex - see below) and apply position: relative to it, and apply position: absolute and according position settings to the wrapper. For details see the snippet below.
.parent {
height: 500px;
border: 1px solid blue;
}
.first {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
ADDITION: Actually it's also possible with flex:
.parent {
height: 500px;
border: 1px solid blue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.first {
position:relative;
height: 100px;
width: 300px;
background: #ccc;
}
.wrap1 {
position: absolute;
top: 100%;
width: 100%;
height: auto;
border: 1px solid green;
}
.second {
background: #eee;
height: 50px;
}
.third {
background: #aaa;
height: 80px;
}
<div class="parent">
<div class="first">A
<div class="wrap1">
<div class="second">B</div>
<div class="third">C</div>
</div>
</div>
</div>
I have a design that I need to replicate with CSS.
The background should be centered in the div
I tried using gradients, but they are not looking good on different browsers.
You can do it this way with Flexbox :
Codepen
section {
border: #f00 solid 2px;
display: flex;
align-items: flex-end;
height: 400px;
}
section .aligner {
border: #00f dashed 1px;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80%;
position: relative;
}
section .aligner .background {
background: #ff0;
width: 100%;
height: 60%;
}
section .aligner .square {
position: absolute;
width: 300px;
height: 100%;
background: #008000;
}
<section>
<div class="aligner">
<div class="background"></div>
<div class="square"></div>
</div>
</section>
I want to learn and try Flexbox therefore just to build a grid construct that looks like this:
Possible sizes of boxes: 4x4, 2x1, 1x1 - they are to be dynamic anywhere.
Responsive to all boxes to the same size
Actually i have this :
.tab {
width: 500px;
height: 100px;
display: flex;
flex-flow: column wrap-reverse;
color: green;
}
.col-wrap-4x4 {
width: 200px;
height: 200px;
display: flex;
flex-flow: column wrap;
}
.col-1x1 {
background-color: black;
border: solid 1px green;
}
.col-1x1.one {
width: 50px;
height: 50px;
}
.col-1x1.two {
width: 100px;
height: 50px;
}
.col-1x1.four {
width: 100px;
height: 100px;
}
<div class="tab">
<div class="col-wrap-4x4">
<div class="col-1x1 four">1</div>
<div class="col-1x1 two">2</div>
<div class="col-1x1 one">3</div>
<div class="col-1x1 one">4</div>
</div>
</div>
Everything I've tried so far has not worked.
Does such a thing anyway?
Like this?
Don't forget that ur parent element must be as big as ur child's + border or margin
.tab {
width: 604px;
height: 100px;
flex-flow: column wrap-reverse;
display: block;
color: green;
}
.col-wrap-4x4 {
width: 230px;
height: auto;
display: inline-block;
flex-flow: column wrap;
}
.col-1x1 {
background-color: black;
/*border: solid 1px green;*/
}
.col-1x1.one {
width: 50px;
height: 50px;
}
.col-1x1.two {
width: 110px;
height: 50px;
}
.col-1x1.four {
width: 100px;
height: 110px;
}
.myClass{
display: inline-block;
float: left;
position: relative;
margin : 10px 5px 0;
}
<div class="tab">
<div class="col-wrap-4x4">
<div class="col-1x1 myClass four">1</div>
<div class="col-1x1 myClass two">2</div>
<div class="col-1x1 myClass one">3</div>
<div class="col-1x1 myClass one">4</div>
</div>
</div>
Greetz