This question already has answers here:
Left column and stacked right column using flexbox CSS [duplicate]
(2 answers)
Closed 1 year ago.
I am trying to make the design below with flexbox how would I do it?
Create a container and dive it into 2 half using flex.
Create the first half and divide it into 2 half of the 8:2 ratio again using it flex in the child flex-elements.
.container {
display: flex;
gap: 1rem;
}
.box {
height: 200px;
flex: 1;
background-color: blue;
}
.box1 {
background-color: white;
display: flex;
flex-direction: column;
gap: 1rem;
}
.internal-box1 {
flex: 8;
background-color: blue;
}
.internal-box2 {
background-color: blue;
flex: 2;
}
<div class="container">
<div class="box box1">
<div class="internal-box1"></div>
<div class="internal-box2"></div>
</div>
<div class="box"></div>
</div>
Try something like this:
<div style="
height: 250px;
width: 100%;
display: flex;
"><div style="
display: flex;
flex-direction: column;
flex: 1;
margin-right: 20px;
"><div style="
flex: 1;
background-color: paleturquoise;
margin-bottom: 20px;
"></div><div style="
height: 40px;
background: blue;
"></div></div><div style="
flex: 1;
background: teal;
"></div></div>
Related
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 4 months ago.
The community reviewed whether to reopen this question 4 months ago and left it closed:
Original close reason(s) were not resolved
Hi this is my example layout on mobile device.
https://codesandbox.io/s/cocky-dust-xuurof?file=/src/styles.css
On the wider screen the third element must be the same width like a second yellow element. The second and the third element. The second and third items together are the same height as the first item. The html structure cannot change, I need use Flexbox, not css grid.
.App {
font-family: sans-serif;
text-align: center;
display: flex;
border: 2px solid black;
flex-wrap: wrap;
}
.one {
background-color: red;
flex-basis: 120px;
height: 80px;
}
.two {
background-color: yellow;
flex-grow: 1;
}
.three {
background-color: green;
height: 30px;
flex-basis: 100%;
}
#media only screen and (min-width: 500px) {
.one {}
.two {}
.three {}
}
<div class="App">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
I modified the media query to account for this snippet.
You should see "Large Screen" results in the snippets "Full Page" mode.
.App {
font-family: sans-serif;
text-align: center;
display: flex;
border: 2px solid black;
flex-wrap: nowrap;
}
.one {
background-color: red;
width: 120px;
height: 80px;
align-items: stretch;
}
.two {
background-color: yellow;
flex: 4 1 auto;
}
.three {
background-color: green;
height: initial;
flex: 4 1 auto;
}
#media screen and (width < 1024px) {
.App {
flex-wrap: wrap;
}
.two {
flex: 4 0 auto;
}
.three {
height: 30px;
flex: 4 0 100%;
}
}
<div class="App">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I would like to achieve something like that
where each "COL" is a div . I would like to be able also to easily edit in the future the distance especially between COL2,3,4 .
Thanks.
You can also use margin property on first child and gap on flex container.
<div class="list">
<div class="list__item">COL1</div>
<div class="list__item">COL2</div>
<div class="list__item">COL3</div>
<div class="list__item">COL4</div>
</div>
.list{
display: flex;
gap: 2rem;
width: 80%;
background-color: greenyellow;
}
.list__item{
background-color: deepskyblue;
}
.list__item:first-child{
margin: 0 auto 0 0;
}
You can play around with this
.flex {
display: flex;
justify-content: space-around;
align-items: center;
}
.col {
background-color: teal;
min-width: 100px;
height: 50px;
border: 1px solid black;
display: flex;
align-items: center;
}
.col:nth-child(1) {
width: 100%;
background-color: red;
}
<div class="flex">
<div class="col">Col1</div>
<div class="col">Col2</div>
<div class="col">Col3</div>
<div class="col">Col4</div>
</div>
I'm trying to make my css with flexbox, so I followed some articles and tried to set my elements like this example:
the elements 1 & 2 are in another container
I'm trying to set the two elements (1 and 3) to be next each other as the second example (The first is what I have now and the other is what I'm trying to achieve.)
but I can't find a good way with the Flexbox since I set the container to flex-direction: column;
<div class="container">
<div class="sub-ctn">
<h5 class="1"><span>♦ </span>{{ text }}</h5>
<span class="2">{{ value }}</span>
<div class="3">
<h5>{{ text }}
</div>
</div>
</div>
CSS:
.container {
margin-right: 2.5%;
direction: rtl;
}
.sub-ctn {
display: flex;
flex-flow: row;
margin-top: 1%;
flex-direction: column;
}
.1 {
width: 100%;
direction: rtl;
text-align: right;
}
.2 {
float: right;
/* text-align: right; */
}
.3 {
margin-left: 1%;
display: flex;
flex-direction: column;
}
let me know if another information is needed
Don't use float and flex together. Flex alone will be much easier and better.
.cont{
display: flex;
width: 80%;
border: 1px solid black;
padding: 10px;
}
.left-cont{
height: 100%;
flex-grow: 1;
}
.right-cont{
flex-grow: 1;
display: flex;
flex-direction: column;
}
.item{
text-align: center;
border: 1px solid black;
margin: 3px;
}
<div class="cont">
<div class="left-cont">
<div class="item">3</div>
</div>
<div class="right-cont">
<div class="item">1</div>
<div class="item">2</div>
</div>
</div>
I have a flex grid with equal columns, but in some of them i have some padding. It appears that this breaks the columns width.
I tried to add the padding to an inner wrapper, but this won't work for me as its percent based.
.grid{
width: 100%;
display: flex;
flex-direction: row;
}
.column {
flex: 1 1 100%;
display: block;
height: 200px;
background-color: #e5e5e5;
border: 1px solid #999999;
&.padd{
padding: 0 5%;
}
}
https://jsfiddle.net/heyapo/8qntbj3c/
Any ideas?
Quite simply flex-grow or flex-basis do not equal width.
Detailed explanation here: by Michael_B.
Padding will add to the dimensions of the element receiving it and the other elements will resolve their sizes accordingly.
If you want to use width...use width (and box-sizing).
.grid {
width: 100%;
display: flex;
flex-direction: row;
}
.column {
width: calc(100% / 3);
display: block;
height: 200px;
background-color: #e5e5e5;
border: 1px solid #999999;
}
padd {
padding: 0 20px;
}
<div class="grid">
<div class="column"></div>
<div class="column"></div>
<div class="column padd"></div>
</div>
This question already has answers here:
HTML5 flexible box model height calculation
(2 answers)
Closed 4 years ago.
I have a container flex with content flexes. How do i make content flex occupy full width and height of container flex.
<div id="main">
<div id="main-nav">
</div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
#main{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
}
#main-nav{
width: 100%
height: 50px;
}
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1;
}
.content{
display: flex;
width: 100%;
height: 100%;
}
The above code makes content to occupy 100% width of container but height is based on the text within the content. I tried the solutions mentioned from similar questions but had no luck and it was still the same.
Basically, I want each of the content to occupy the same height as occupied by the container in the viewport height. I also tried jQuery,
var rht = $("#container").height();
$(".content").height(rht);
It changes the height properly but adds a horizontal scroll bar with increase in width.
After several updates to the original question:
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
border: 1px solid red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid green;
}
.content {
flex: 1;
border: 1px solid orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content"></div>
<div class="content"></div>
</div>
</div>
JSfiddle Demo
You cannot set width or height of flex's child is bigger (size of flex)/(number of flex's childs) but you can add position: absolute into .content and position: relative into .container then set width and height for .content. First .content is under second .content, you can use propety z-index or display: none to control.
* {
box-sizing: borderbox;
margin: 0;
padding: 0;
}
#main {
display: flex;
flex-direction: column;
background: red;
min-height: 100vh;
}
#main-nav {
flex: 0 0 50px;
}
.container {
position: relative;
display: flex;
flex: 1;
background: green;
}
.content {
position: absolute;
left: 0px;
top: 0px;
height: 100%;
width: 100%;
flex: 1;
background: orange;
}
<div id="main">
<div id="main-nav"></div>
<div class="container">
<div class="content">left</div>
<div class="content">right</div>
</div>
</div>