I have these simple flexbox containers and items. I just want them to stretch either across the main axis for flexbox row and column but the default stretch property doesn't seem to work.
.container1 {
display: flex;
flex-direction: row;
}
.item1 {
flex-grow: 1;
flex-shrink: 0;
}
.container2 {
display: flex;
flex-direction: column;
}
.item2 {
flex-grow: 1;
flex-shrink: 0;
}
<div class="container1">
<input type="text" class="item1" placeholder="placeholder"/>
</div>
<div class="container2">
<textarea class="item2"></textarea>
</div>
According to this answer: How to stretch flex child to fill height of the container? it should work but I'm not sure why the default stretch is not working.
Am I utilizing flex-grow incorrectly here?
Not sure if this is a best practice but setting height:100vh works for the column oriented flexbox.
.container1 {
display: flex;
flex-direction: row;
}
.item1 {
flex-grow: 1;
flex-shrink: 0;
}
.container2 {
display: flex;
flex-direction: column;
}
.item2 {
flex-grow: 1;
flex-shrink: 0;
height: 100vh;
}
<div class="container1">
<input type="text" class="item1" placeholder="placeholder"/>
</div>
<div class="container2">
<textarea class="item2"></textarea>
</div>
Related
The element in the image is styled using absolute positioning but when I resize the screen I have to slightly adjust the positioning of both the 'For Sale' element and the '$400,000' element so I am curious as to if there is a way to achieve the same layout using flexbox?
Here is my attempt (https://codepen.io/ob98/pen/eYVPJLJ)
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
css:
.container{
display: flex;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1{
align-self: flex-start;
}
.item2{
align-self: flex-end;
justify-self: flex-end; /* If align-self moved this to the bottom of the container vertically, I am thinking that this should move it to the end/right side of the container horizontally, but that is not working */
}
Just went to https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self and saw that "In flexbox layouts, this property is ignored (more about alignment in Flexbox)", so I guess that explains why that is not working but I don't really understand why this property is being ignored... Anyway, is there a way to achieve this layout using flexbox or do I have to stick to absolute positioning? Thanks for any input.
Add to .container the declaration justify-content: space-between, to make both your p go to the container edges, and that's done!
.container {
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item1 {
align-self: flex-start;
}
.item2 {
align-self: flex-end;
justify-self: flex-end;
}
<div class = 'container'>
<p class='item1'>Top Left</p>
<p class='item2'>Bottom Right</p>
</div>
Adding justify-content to container and just using the item2 class like this would help.
.container{
display: flex;
justify-content: space-between;
background: red;
width: 500px;
height: 200px;
color: white;
}
.item2{
align-self: flex-end;
}
Can be the answer but im not sure. When i ran it worked.
.bg-flex {
width: 100vw;
height: 100vh;
background-image: url('https://media.istockphoto.com/photos/the-city-of-london-skyline-at-night-united-kingdom-picture-id1312550959');
display: flex;
flex-direction: column;
}
.for-sale {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
}
.k-400 {
height: 50%;
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
.example {
width: 300px;
height: 100px;
background-color: aqua;
}
<div class="bg-flex">
<div class="for-sale">
<div class="example">
</div>
</div>
<div class="k-400">
<div class="example">
</div>
</div>
</div>
I am using node.js and its framework express to create a movie image gallery. A foreach loop is used to display data onto the page. The image gallery should display 4 images across in each row. For some apparent reason, the layout grid is broken and images are being duplicated when displayed on page. How can I create a grid layout for my image gallery with no duplicated data?
index.ejs
<!-- Photo Grid -->
<div class="row-image">
<% movies.forEach(function(movies) { %>
<div class="column">
<img src="<%= movies.image %>" style="width:100%">
<div class="desc">
<%= movies.name %>
</div>
</div>
<div class="column">
<img src="<%= movies.image %>" style="width:100%">
<div class="desc"><%= movies.name %></div>
</div>
</div>
<% } ); %>
main.css
* {
box-sizing: border-box;
}
.row-image {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 14px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px 20px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
border-radius: 9px;
}
.desc a:hover {
text-decoration: none;
color: #b3b3b3;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%;
}
}
I want to achieve the following, changing my page layout for mobile/desktop using Flexbox.
I am trying to achieve the following using Flexbox ordering:
http://i.stack.imgur.com/iBXpJ.jpg
Hope this makes sense?
Here is a way of doing this using flexbox. Here is the working demo.
<div class="main-container">
<div class="item menu">Menu</div>
<div class="item sidebar">Sidebar</div>
<div class="item content">Content</div>
</div>
.main-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.item {
border: 5px solid gray;
}
.menu {
flex-basis: 200px;
width: 200px;
}
.sidebar {
flex-grow: 1;
width: 200px;
}
.content {
flex-basis: 100%;
width: calc(100% - 200px);
}
#media (max-width: 600px) {
.main-container {
flex-wrap: no-wrap;
height: 100%;
}
.item {
width: 100%;
}
.sidebar, .content {
flex-basis: auto;
}
}
Before Chrome 43, div1 would take up 10% of the container height regardless of its childrens size, and div1 would overflow. As of Chrome 43 div1 doesnt follow flex-grow anyone more and instead grows to its childrens size. Is this supposed to work this way? How do i get div1 to overflow and follow its flex-grow property. Thanks!
Heres a jsfiddle: http://jsfiddle.net/HorseFace/xsbmmf4o/
<div id="container">
<div id="div1">
<div id="inner1"></div>
</div>
<div id="div2">
<div id="inner2"></div>
</div>
</div>
#container {
height: 500px;
display: flex;
flex-direction: column;
}
#div1 {
background: red;
flex-grow: 0.1;
}
#inner1 {
height: 200px;
background: lightcoral;
}
#div2 {
background: blue;
flex-grow: 0.9;
overflow: auto;
}
#inner2 {
height: 200px;
background: #ccccff;
}
body {
color: purple;
background-color: #d8da3d
}
You are misunderstanding flex-grow. It sets the flex grow factor,
which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1.
So only free space space is distributed. If you want that flex item to take up 10% of the flex container, you should set the flex-basis to 0:
the flex basis [is] the initial main size of the flex item, before free space is distributed.
Note you can use the shorthand flex property to set both flex-grow and flex-basis simultaneously (and flex-shrink too):
flex: 0.1; /*
flex-grow: 0.1;
flex-shrink: 1;
flex-basis: 0;
*/
Also note that the Flexbox spec changed the initial value of min-height and min-width to auto (previously it was 0). This may break your percentages, so either use overflow different than visible, or set min-height: 0.
body {
color: purple;
background-color: #d8da3d
}
#container {
height: 500px;
display: flex;
flex-direction: column;
}
#div1, #div2 {
min-height: 0; /* Or `overflow: hidden` */
}
#div1 {
background: red;
flex: 0.1;
}
#inner1 {
height: 200px;
background: lightcoral;
}
#div2 {
background: blue;
flex: 0.9;
overflow: auto;
}
#inner2 {
height: 200px;
background: #ccccff;
}
<div id="container">
<div id="div1">
<div id="inner1">Inner1</div>
</div>
<div id="div2">
<div id="inner2">Inner2</div>
</div>
</div>
I have been struggling with the flexbox column layout. I am trying to create a 3 column layout that stretch vertically all the way to the end of the page (height:100%;). However, 2 of the columns must have specific widths that still scale down on different size screens, is this possible?
CSS:
.container {
display: -webkit-flex;
display: flex;
height: 100%;
}
.initial {
-webkit-flex: initial;
flex: 1;
width: 510px;
min-width: 100px;
}
.flex1 {
-webkit-flex-basis: 28px; /* Safari 6.1+ */
flex-basis: 28px;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
Here's a working example of what you might be looking for, if I've understood the question correct.
I've commented the important stuff in the code. Take a look at the code, and compare it with your own. You've been using some unnecessary flexbox elements such as flex-basis: 28px; which should just be width: 28px;
HTML
<div class="container">
<section class="elem initial">
<div id="Left">
<h1>Heading</h1>
<p>Lorem Ipsum...</p>
</div>
</section>
<section class="elem flex1">
<div class="col"><img src="img/stripe"/></div>
</section>
<section class="elem flex2">
<div id="Right">
<h2>Header</h2>
<ul>
<li>List item.</li>
</ul>
</div>
</section>
</div>
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
height: 100%;
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
width: 28px;
background-color: red;
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
UPDATE
I forked the pen in order to create a new working example based on the comments from the author of this question. He wanted the columns to wrap and the gutter to disappear at a certain size - I've used media queries to accomplish this.
Link to the new forked CodePen
HTML is the same.
CSS
html, body {
height: 100%; /* Makes it possible to illustrate the full 100% height */
}
.container {
display: flex; /* Adds flex functionality */
flex-direction: column;
height: 100%;
}
#media all and (min-width: 768px) {
.container {
flex-direction: row;
}
}
.initial {
width: 510px;
min-width: 100px;
background-color: orange;
}
.flex1 {
display: none;
}
#media all and (min-width: 768px) {
.flex1 {
display: flex;
width: 28px;
background-color: red;
}
}
.flex2 {
flex: 1; /* Fills the rest of the available space */
background-color: green;
}
Remember your vendor-prefixes.