I have a flex container and the children in that are wrapping, I want them to both remain 100% in width - how would I do this?
.flexbox {
display: flex;
align-items: center;
width: 100%;
height: 100vh;
}
.container {
display: flex;
flex-shrink: 0;
display: block;
}
<div class="flexbox">
<div class="container">sadasd</div>
<div class="container">adasdsad</div>
</div>
https://jsfiddle.net/shx2yheg/
You just need to set flex: 0 0 100% on flex child elements and initial value of flex-wrap is nowrap so you don't have to change that.
.flexbox {
display: flex;
align-items: center;
width: 200px;
border: 2px solid red;
}
.container {
flex: 0 0 100%;
border: blue 1px solid;
}
<div class="flexbox">
<div class="container">sadasd</div>
<div class="container">adasdsad</div>
</div>
you could do that by setting the flex-flow property on the the flexbox like this
.flexbox {
display: flex;
align-items: center;
flex-flow: column;
width:100%;
height:100vh;
}
.container {
display: flex;
}
Related
I'm trying to create a layout for this website using flexbox but the justify-content property doesn't seem to be working. Ultimately, I want it to look like this:
I have the grid laid out correctly but can't get space between elements at this point. This is what I've got right now:
How do I align my content correctly? Here is my codepen: https://codepen.io/caseycling/pen/poNXRXZ
.service-container {
display: flex;
justify-content: center;
}
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
}
.container>div {
border: 1px solid grey;
min-height: 100px;
min-width: 100px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around; //Not working
}
.service {
flex: 40%;
margin: .5rem;
}
<div class='service-container'>
<div class='img'>IMG</div>
<div class='container'>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
</div>
</div>
I think it's because you attach space-around in wrong place. Now you have it on container which is only the left rectangle. This property will affect everything inside but not outside. You should add this prop to the highest wrapper which in this case is service-container
.service-container {
display: flex;
justify-content: space-around; // working here
}
Your primary flex container has justify-content: center applied.
You don't want to center the items, it seems. You want them separated like in your image.
So use justify-content: space-between.
But if you still want the layout centered, set a width to the container and use the margin property.
.service-container {
display: flex;
justify-content: space-between;
width: 800px;
margin: 0 auto;
}
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
}
.container>div {
border: 1px solid grey;
min-height: 100px;
min-width: 100px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around; //Not working
}
.service {
flex: 40%;
margin: .5rem;
}
<div class='service-container'>
<div class='img'>IMG</div>
<div class='container'>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
<div class='service'>Service</div>
</div>
</div>
Add margin-right to .img
.img {
margin: .5rem;
border: 1px solid grey;
min-width: 100px;
margin-right: 100px; // Increase space between image and servies
}
I cannot understand WHY I am not getting this:
.container {
width: 600px;
height: 400px;
border: 3px solid green;
}
.cg-panel {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: center;
}
.cg-panel .content {
flex: 1;
background-color: tomato;
}
<div class="container">
<div class="cg-panel">
<div class="content"></div>
</div>
</div>
I, for the life of me, cannot understand why the content panel does not vertically stretch the entire container. What is the purpose of "flex:1" if it isn't going to work? Am I not reading the documentation correctly?
There's nothing in your CSS that is expanding the height of .cg-panel to fit its parent .container.
Adding height: 100%; to .cg-panel fixes this:
.container {
width: 600px;
height: 400px;
border: 3px solid green;
}
.cg-panel {
display: flex;
flex-flow: column;
align-items: stretch;
justify-content: center;
height: 100%; /* add this */
}
.cg-panel .content {
flex: 1;
background-color: tomato;
}
<div class="container">
<div class="cg-panel">
<div class="content"></div>
</div>
</div>
This question already has answers here:
Center and bottom-align flex items
(3 answers)
Closed 4 years ago.
I have a problem with flexbox. I attempted to align two elements; the one to the top of the container, and another one to the center. Most of the flexbox examples were using three elements, not two elements. So I tried my own solution.
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
}
#box2 {
display: flex;
background-color: #00ff00;
}
#dummy {
display: flex;
opacity: 0;
}
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="dummy">dummy</div>
</div>
...and I also applied it to horizontal case.
#main {
display: flex;
flex: 1;
flex-direction: row;
justify-content: space-between;
height: 100px;
background-color: #dfdfdf;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
width: 200px;
}
#box2 {
display: flex;
background-color: #00ff00;
width: 100px;
}
#dummy {
display: flex;
opacity: 0;
width: 200px;
}
<div id="main">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="dummy">dummy</div>
</div>
However, it needs a useless dummy element. I think it is not a good idea :(
Is there any better way to solve this?
you don't have to add this 'dummy' div. According to me you should keep display flex in you container, but change justify-content: space-between to justify-content: center.
Then simply add position absolute to you first, child element and display it on the top of the container. Also remember to add relative position to your container.
Here is working code:
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
position: relative;
}
#box1 {
display: flex;
justify-content: flex-end;
background-color: #ff0000;
position:absolute;
top:0;
width:100%;
}
#box2 {
display: flex;
background-color: #00ff00;
}
Fiddle: https://jsfiddle.net/95Lwcbuk/1/
If you want to use flex-box only, you could wrap another .container element around each of your boxes, set these to use flex also, but set the first one to justify-content: flex-start, the last one to justify-content: flex-end.
See example
#main {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
height: 100px;
background-color: #dfdfdf;
}
.container {
flex-basis:50%;
display:flex;
flex-direction:column;
}
.container:first-child {
justify-content: flex-start;
}
.container:last-child {
justify-content: flex-end;
}
#box1 {
background-color: #ff0000;
}
#box2 {
background-color: #00ff00;
}
<div id="main">
<div class="container">
<div id="box1">box1</div>
</div>
<div class="container">
<div id="box2">box2</div>
</div>
</div>
.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>
How do I stretch the divs with a yellow background to full height? It should cover up the green but it is not working. I tried adding height: 100% on it but then it adds up the height from the search bar?
https://jsfiddle.net/nuy20j1h/
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
First you should add a style reset, I'm using this now * {} as you can se below. The trick here is to run flex-direction: column; on .home and you can tell .content-wrap to take up the rest of that space after the search with flex-grow: 1;
box-sizing: border-box; is, if you add let's say width: 200px; to a element, and add padding: 20px;, the element will stay 200px with the padding included. If you don't have that, it will take up 200px + 40px.
if you want the fiddle, here it is
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: flex-start;
width: 75%;
background: green;
}
.search-bar {
width: 100%;
padding: 25px;
background: blue;
}
.content-wrap {
display: flex;
flex-grow: 1;
flex-wrap: wrap;
width: 100%;
align-items: flex-stretch;
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
As mentioned in other answers, there is one main issue here:
flex-direction: column;, which I added to home, to enable the usage of flex properties instead of height, to make the .content-wrap fill the available space left in home
That will make the .search-bar and .content-wrap stack vertical, and enable the use of flex: 1 on .content-wrap, which will make it fill the remaining space/height.
So even if you got answers already, and since there are some properties with wrong value, or not needed, I decided to post an answer to clarify the changes made.
See my notes made in the CSS for further clarifications and what I changed.
Stack snippet
.block {
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.sidebar {
height: 600px;
width: 25%;
background: red;
}
.home {
display: flex;
flex-direction: column; /* added */
/*flex-wrap: wrap; removed, not needed */
/*align-items: flex-start; removed, items should fill parent's,
in this changed case, width */
width: 75%;
background: green;
}
.search-bar {
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
padding: 25px;
background: blue;
}
.content-wrap {
flex: 1; /* added, take the remaining space left
left of its parent (height in this case) */
display: flex;
flex-wrap: wrap;
/*width: 100%; not needed, default for column
item is to fill parent width as
its "align-items" is "stretch" */
/*align-items: flex-stretch; wrong value, should be "stretch",
though since that is the default,
it is not needed */
}
.content,
.single {
width: 50%;
background: yellow;
}
<div class="block">
<div class="sidebar">sidebar</div>
<div class="home">
<div class="search-bar">search bar</div>
<div class="content-wrap">
<div class="content">lorem ipsum</div>
<div class="single">test</div>
</div>
</div>
</div>
flex-direction: column; is your friend. Here is a reworked fiddle of your code: https://jsfiddle.net/vsjktmms/1/
Using the same HTML structure you provided:
.block {
display: flex;
width: 80%;
margin: 0 auto;
background-color: gray;
align-items: stretch;
}
.sidebar {
width: 25%;
height: 600px;
background-color: red;
}
.home {
display: flex;
flex-direction: column;
align-items: stretch;
width: 75%;
background-color: green;
}
.search-bar {
padding: 25px;
background-color: blue;
}
.content-wrap {
flex: 1 1 auto;
display: flex;
flex-wrap: wrap;
width: 100%;
background-color: pink;
}
.content,
.single {
width: 50%;
background: yellow;
}