firstly sorry for my English,
I ask me if we can change the style of a last child in flex div when this one goes to the line (wrap).
What I want precisely is to modify the last child (.flexChild in demo) to change the justify-content at space-around or to add padding when the user is on mobile or he resize the window
(without mediaqueries)
DEMO Here
.parent {
display: flex;
align-items: center;
flex-wrap: wrap;
width: 100%;
height: 100px;
background: red;
}
.child {
padding: 0 20px;
background: green;
border: 1px solid black;
}
.flexChild {
background: yellow;
display: flex;
min-width: 200px;
flex-wrap: wrap;
flex: 1 1 auto;
justify-content: space-between;
}
<div class="parent">
<div class="child">
Testtestesttest
</div>
<div class="child">
testtesttestt
</div>
<div class="child">
testesttestest
</div>
<div class="child flexChild">
<div class="left">
<button>1</button>
<button>2</button>
</div>
<div class="right">
<button>3</button>
</div>
</div>
</div>
Related
i want to create a flexbox layout title, detail, and other content inside one div and a div with content close next to this div and should be placed in the center of the main box (named container).
What i have tried to do?
I created a div named container and placed title and other details inside it. In doing so, close div is also inside the div named container. It should be outside the container div and in middle of it.
I want to create a layout like in picture below,
Could someone help me solving this? link to code
https://codepen.io/anon/pen/BbaKwy
.box_wrapper {
width: calc(100% - 450px);
border: 1px solid green;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
<div>close</div></div></div>
Thanks.
You can achieve the desired result by moving the close div and adding a couple more styles to box_wrapper
.box_wrapper {
display: flex;
flex-direction: row;
align-items: center;
border: none;
margin: 0 auto;
}
.container {
display: flex;
justify-content: space-between;
width: calc(100% - 450px);
border: 1px solid blue;
padding: 10px;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
</div>
<div>close</div>
adding the flex-direction:row to .box_wrapper is what aligns it to the right, and setting align-items:center is what positions it in the middle vertically.
EDIT:
If you want to achieve this while keeping the close div within the box_wrapper class, you can do so as follows:
.box_wrapper {
display: flex;
flex-direction: row;
border: none;
margin: 0 auto;
width: calc(100% - 450px);
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
flex-grow: 1;
padding: 10px;
}
.content {
border: 1px solid blue;
flex-grow: 1;
}
<div class="box_wrapper">
<div class="container">
<div class="content">
<div>title</div>
<div>detail</div>
<div>
<div>ticket number</div>
<div>
<h2>Debug</h2>
someresponse
<div/>
</div>
</div>
</div>
</div>
<div>close</div>
</div>
I need css styling for 2 columns. The first column should use the complete width and the second column next to it should use only the width it needs. How can i do that? Is there any way to do this with display: flex?
Example:
"-" = whitespace
if second column is display: none, the first column should use width 100%
[First-Column-------------------------------------------------------]
and if not
[First-Column------------------------------------------------][HELLO]
[First-Column-------------------------------------------][HELLOHELLO]
You can do this with flexbox. Just use flex: 1 for the first child and flex: 0 for the second.
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you hide the second child, the result looks like this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
}
.child1 {
flex: 1;
background: red;
}
.child2 {
flex: 0;
background: blue;
display: none;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
If you want items with only width of the content you could use this:
.wrapper {
display: flex;
flex-flow: row wrap;
color: white;
justify-content: space-between;
}
.child1 {
background: red;
}
.child2 {
background: blue;
}
<div class="wrapper">
<div class="child child1">
test
</div>
<div class="child child2">
test
</div>
</div>
You can do this with below code:
.mainDiv, .mainDiv div{
display: block;
}
.mainDiv .firstDiv{
float: left;
width: 200px;
}
.mainDiv .secondDiv{
float: left;
width: calc(100% - 200px);
}
<div class="mainDiv">
<div class="firstDiv"> First Div </div>
<div class="secondDiv"> Second Div </div>
</div>
.main{
display:flex;
}
<div class="main">
<div>[First-Column------------------------------------------------]</div>
<div> [HELLO]</div>
</div>
I am trying to align the footer at the bottom, leave the space at the top. but not works. any one help me to know the correct way?
.parent {
border: 1px solid red;
display: flex;
}
.child {
border: 1px solid green;
min-height: 100px;
flex: 1;
align-items:bottom;
}
.footer{
background:#808080;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
First of all, to align items to the bottom the correct way is align-items: flex-end;
I also declared display:flex; on .child, and gave it a width.
.parent {
border: 1px solid red;
display: flex;
}
.child {
border: 1px solid green;
min-height: 100px;
display: flex;
width: 33.333%;
align-items: flex-end;
}
.footer{
background:#808080;
width: 100%;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
In this example your .child also needs to have display: flex and .footer needs align-items: bottom.
Why? This is actually multiple nested flex layouts.
As per the code you have provided. This can be a possible solution.
.parent {
border: 1px solid red;
display: flex;
}
.child {
border: 1px solid green;
min-height: 100px;
flex: 1;
display: inline-flex;
align-items: flex-end;
flex-direction: row;
}
.footer {
display: inline-block;
width: 100%;
background:#808080;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
But in a more optimized way. Let me show you another sample:
.parent {
border: 1px solid red;
display: flex;
}
.child {
flex: 1;
border: 1px solid green;
min-height: 100px;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
background:#808080;
}
<div class="parent">
<div class="child">
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="content">Content</div>
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
If you don't want to change the HTML tags and use the same as in the question, you can go with the first solution. Otherwise, the second one will serve better.
Remove line-height from the .child and add height for the .parent.
Updated :
.parent {
border: 1px solid red;
display: flex;
align-items: flex-end;
height: 100px;
}
.child {
border: 1px solid green;
flex: 1;
align-items:bottom;
}
.footer{
background:#808080;
}
<div class="parent">
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer</div>
</div>
<div class="child">
<div class="footer">Footer-will be in bottom!!</div>
</div>
</div>
I am trying to get the following layout to work using flexbox, I have two div containers next to each other. In the first div there are 6 boxes they must be 3, then wrap on to the next line. The second div contains text. I have tried a number of different approaches as I would like them all stacked on mobile and tablet and then laid out above on desktop.
Code I have so far:
<div class="container">
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
<div class="child">Test</div>
</div>
<div class="box-container">
<h1>hello</h1>
</div>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 800px;
border: 1px solid red;
}
.child {
flex: 0 0 calc(33.3% - 20px);
border: 1px solid blue;
}
.box-container{
display:flex;
}
The two containers are made to be next to each other by setting flex-basis: 50% so that they each take up 50% of the row and by making their container (body) a flex container.
A media query is used to change the style when the maximum width of the screen is 768px or lower. It changes the the flex-direction of the containers to column so that elements are stack vertically. Then, flex-basis is set to 100% so each element takes up an entire column.
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-basis: 50%;
border: 1px solid red;
}
.child {
flex: 0 0 calc(33.3% - 20px);
border: 1px solid blue;
}
.box-container {
display: flex;
flex-basis: 50%;
}
body {
display: flex;
}
#media only screen and (max-width: 768px) {
.container {
flex-direction: column;
flex-basis: 100%;
}
.child {
flex-basis: 100%;
}
body {
display: flex;
flex-direction: column;
}
.box-container {
flex-basis: 100%;
}
}
<body>
<div class="container">
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
<div class="child">
Test
</div>
</div>
<div class="box-container">
<h1>
hello
</h1>
</div>
</body>
I have a div with display: flex; flex-direction: row;. The children of this div take the full height unless I specify align-items: center. Code below -
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
JSFiddle
What I want to achieve is that 2.1 and 2.2 should take 50px (50%) height and should have its content middle aligned vertically. They should also stretch the full available space horizontally (like width: auto or 100%). Then if 2.1 is not present, 2.2 should take 100px height and should be vertically aligned to middle.
You need to make row-items a flex box and apply align-items: center; to them
This is the code that you should add
.row1 .row-item {
display: flex;
align-items: center;
}
See result below :
.row {
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
background: beige;
border: 1px solid red;
margin: 10px 0;
}
.row2 {
align-items: center;
}
.row-item {
border: 1px solid green;
}
.row1 .row-item {
display: flex;
flex-wrap: wrap;
}
.row1 .row-item div {
width: 100%;
border: 1px solid blue;
display: flex;
align-items: center;
}
.item1,
.item3 {
width: 100px;
}
.item2 {
flex: 1;
}
<div class="row row1">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
<div class="row row2">
<div class="row-item item1">1</div>
<div class="row-item item2">
<div> 2.1 </div>
<div> 2.2 </div>
</div>
<div class="row-item item3">3</div>
</div>
You can use line-height to achieve vertical alignment. In this case since your.row1 has a height of 100px add the following to that CSS: line-height: 100px; See the updated jsfiddle and for only .row1 see this jsfiddle