I am facing a problem with flex-direction: column on responsive mode. When I write flex-direction: column to .container its not wrapping to responsive like flex-direction: row, it's going outside of the layout. How to fix that?
<div class="content">
<div class="container">
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
<div class="box">First Name Man</div>
</div>
</div>
.content {
width: 100%;
min-height: 800px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
background-color: whitesmoke;
}
.container {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.box {
width:700px;
margin: 10px;
color:white;
min-height: 70px;
display: flex;
align-items: center;
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
justify-content: space-around;
background-color: indigo;
flex-direction: column;
flex-wrap: wrap;
}
You have a fixed width setting for .box (700px). Change that to width: calc(100% - 20px) (i.e. full width minus 20px for the margin left and right) in a media query, then it will work as desired.
Related
How can make child-6 is stretch to half the height of parent?
avoiding the way of splitting 6 items into 2 groups.
I want to stretch child-6 but not working and this makes sense to me because to make a specific item stretch will be stretched the rest space, not half.
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-between;
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>
Like below:
.parent {
width: 600px;
margin: 0 auto;
padding: 10px;
height: 300px;
background-color: #eee;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
/*align-content: space-between; removed */
}
.parent div {
color: #eee;
background-color: rgb(29, 28, 27);
padding: 10px 0;
width: calc(94%/3);
display: flex;
justify-content: center;
}
.parent div.ch6 {
align-self: stretch;
}
.parent div.ch5,
.parent div.ch4{
align-self: end; /* added */
}
<div class="parent">
<div class="ch1">1</div>
<div class="ch2">2</div>
<div class="ch3">3</div>
<div class="ch4">4</div>
<div class="ch5">5</div>
<div class="ch6">6</div>
</div>
I'm learning how to utilize flex and just started running into issues for after the flexbox is completed...
#initial {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
width: 1200px;
margin-left: auto;
margin-right: auto;
border: 1px solid white;
}
#initial .menu {
display: flex;
flex: 1;
justify-content: space-evenly;
align-items: center;
margin: 15px auto 15px auto;
width: 1100px;
border: 1px solid rgba(245, 245, 245, 0.699);
border-radius: 50px;
line-height: 2rem;
font-size: 1.1rem;
overflow: hidden;
}
#initial .menu .menuItem {
display: flex;
flex: 1;
padding-top: 10px;
padding-bottom: 10px;
width: 100%;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
#initial .menu .menuItem:hover {
background-color: #FDB000;
color: black;
cursor: pointer;
display: flex;
flex: 1;
text-align: center;
flex-direction: column;
flex-wrap: wrap;
align-content: space-around;
justify-content: space-evenly;
}
<div id="initial">
<div class="menu">
<div id="initialMenuHeader" class="menuItem" onclick="menuCollapsable(this)">Δ</div>
<div id="initialMenuHVQ" class="menuItem" onclick="initialHVQ()">Hivecoin</div>
<div id="initialMenuRVN" class="menuItem" onclick="initialRVN()">Ravencoin</div>
<div id="initialMenuAVN" class="menuItem" onclick="initialAVN()">Avian</div>
</div>
<div class="body">
<h1>NAME OF POOL GOES HERE</h1>
<p class="intro">¡Intro crap will go here!</p>
</div>
</div>
As it stands, my .menu looks like this. Please note that the image is uncensored and includes expletives
Everything I could find online suggests that when the flex-box is completed, it should go back to the normal flow (e.g. not floating).
Please let me know what I'm doing wrong and/or missing.
JSFiddle of my code (added some things that I didn't include above like body for background-color and color
Since you make #initial as flex, and by default flex-direction set to row your menu align with with your body. If your want menu & body in 2 lines add below css:
#initial{
flex-direction: column;
}
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
height: 100%; /* not working */
/* doesn't work: align-self: stretch; */
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<div class="appShopSummaryInfo">
<h3>Title</h3>
More Information
</div>
</div>
<!-- ENDFOREACH -->
</div>
I've had a look at some other stackoverflow answers to similar questions, but none work in this situation. Not sure why, but cannot get the orange div to expand to the full height of it's parent.
Setting a height to 100% obviously won't work since the parent doesn't have a fixed height, but aligning itself as stretch also fails to stretch the height.
If anyone can solve this, can someone explain why the align stretch won't work, and why their solution does? Thanks for any help here.
Do you mean something like this ?
you have to add align-items: stretch; to the parent not the item itself
check out this css flex guide
add align-items: stretch; to .appShopSummaryContainer .appShopSummaryProductWrap and remove height: 100%; from .appShopSummaryContainer .appShopSummaryInfo and add justify-content: center; to .appShopSummaryContainer .appShopSummaryInfo
.appShopSummaryContainer {
display: flex;
flex-flow: column wrap;
}
.appShopSummaryContainer .appShopSummaryProductWrap {
flex-basis: 100%;
background: pink;
height: 100%;
width: 100%;
display: flex;
flex-flow: row nowrap;
align-items: stretch;
}
.appShopSummaryContainer .appShopSummaryImg {
flex: 0 0 40%;
height: auto;
padding-bottom: 26.667%;
background: green;
background-size: cover !important;
background-position: center center !important;
}
.appShopSummaryContainer .appShopSummaryInfo {
flex: 0 0 60%;
background: orange;
display: flex;
flex-flow: column wrap;
align-items: flex-start;
justify-content: center;
}
.appShopSummaryContainer .appShopSummaryMoreInfoBtn {
cursor: pointer;
background: #214291;
color: #fff;
padding: 10px;
border-radius: 5px;
}
<div class="appShopSummaryContainer">
<!-- FOR EACH THING DO THIS -->
<div class="appShopSummaryProductWrap">
<div class="appShopSummaryInfo">
<h3>Title</h3>
More Information
</div>
</div>
<!-- ENDFOREACH -->
</div>
I need a layout using flexbox, where 2 flex-items, item-1 should be aligned at top-center, while item-2 should be at bottom-center. I could not figure out how to do that.
See the below code:
.container{
padding:10px;
background: #fff;
border-radius:5px;
margin: 45px auto;
box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1);
}
.item{
color: #fff;
padding: 15px;
margin: 5px;
background: #3db5da;
border-radius: 3px;
}
.container{
display: flex;
min-height: 50vh;
justify-content: center;
align-items: center;
flex-direction: column;
}
.item{
/*margin: auto;*/
/*align-self: flex-start;*/
}
.item-4{
align-self: flex-start;
}
<div class="container">
<div class="item item-4">
Flex Item
<p>Vertical and horizontal align easy!</p>
</div>
<div class="item item-5"> bottom-center</div>
</div>
Here is fiddle link : https://jsfiddle.net/q5cw4xvy/
What you are looking for is justify-content: space-between; to align the items until the corners.
Add that to the .container and there you go.
.container{
/*justify-content: center;*/
justify-content: space-between;
}
On .item-4 you have align-self: flex-start; but you don't need that. just remove it.
https://jsfiddle.net/q5cw4xvy/2/
To better help you understand flexbox, there is a really nice css-tricks article.
Do you mean something like this?
https://jsfiddle.net/da4jdff7/1/
.container{
display: flex;
min-height: 50vh;
align-items: center;
flex-direction: column;
}
.item-5 {
margin-top: auto
}
I have flexbox that I want to place two more flexboxes in.
.Summary_Row{
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
margin-top: 10px;
border-bottom: 2px solid #d3d3d3;
}
.col_left{ order:1; width: 33%; display:flex; justify-content: center; text-align: center;}
.col_center{order:2; width: 33%; display:flex; justify-content: center; border-right: 2px solid #d3d3d3; border-left: 2px solid #d3d3d3; text-align: center;}
.col_right{ order:3; width: 33%; display:flex; justify-content: center; text-align: center;}
.int_row{
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-flow: row;
flex-flow: row;
width: 100%;
}
#inside_left{order:1; display:flex; justify-content: center; align-items: center; width: 25%;}
#inside_right{order:2; display:flex; flex-flow: column; justify-content: center; width: 75%; text-align:left;}
In my CSS above, I have a flexbox (summary_row) that is split into three equal columns. For col_right, I want to further split that into two more boxes side by side, one taking up 25% and the other 75% of col_right. I have int_row which I thought should contain inside_left and inside_right, but don't know if that's superfluous. Even though I have int_row set to 100%, the width actually doesn't extend the even close to the full width of col_right.
Blue in the image above is int_row and green is inside_right. Notice that the blue doesn't come close to being 100% of the width. I basically don't want the image and green to overlap. I'm thinking if the width is extended more, the overlap wouldn't occur.
Any suggestions on how I can achieve this or if I'm even thinking about this correctly?
I've made a working example for you on CodePen.
html:
<div class="row">
<div class="row__left">.row__left</div>
<div class="row__center">.row__center</div>
<div class="row__right">
<div class="row__right-a">.row__right-a</div>
<div class="row__right-b">.row__right-b</div>
</div>
</div>
css:
.row {
display: flex;
border: 1px solid #000;
padding: .5em;
}
.row__left,
.row__center,
.row__right {
flex: 0 0 33.3333333%;
border:1px solid red;
padding: .5em;
box-sizing: border-box;
}
.row__right {
display: flex;
}
.row__right-a {
flex: 0 0 25%;
background-color: blue;
}
.row__right-b {
flex: 0 0 75%;
background-color: green;
}
You did not need the extra .int_row element. Because a flex item (child) can also be a flex container.
You should also use flex-basis and flex-grow instead of width when trying to make grids with flexbox. I used the shorthand flex property. It's always a good idea to use the flex shorthand property because it forces you to set the flex-grow, shrink and basis value. Some browsers (IE) don't have the right default values so that will save you some trouble.
Also, this is the go to article to get started with Flexbox.