I am carrying out my first "web design project?", and I am having this issue:
If the screen is +922px, I want the articles (flex-items) to fill as much width as available, but always forming a two-column layout inside the main (flex-container). When the screen is less than 922px, I want them to position in one column.
Is it possible to do this with flexbox, or I made a bad decision and I should use grid/media queries/column-count: 2 instead?
For now, I am uncapable to give the articles a reasonable width without them displaying into a 1-column layout when I shrink the page a little. I would like the items to shrink/grow a bit according to the browser length.
Sorry for my English by the way.
.main {
grid-column: 2/3;
grid-row: 2/3;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
.main__title {
min-width: 100%;
margin-bottom: 0;
}
.article {
width: 500px;
}
.article__title {
width: 100%;
}
.article__p {
max-width: 75%;
margin: 0px;
}
.article__img {
margin: 1em;
width: 20%;
float: left;
}
The entire code here: https://github.com/llfontbote/DAW-M9
Related
I've been trying to debug a CSS flex issue for a few hours. I need the three boxes in each row to have the same height. I've used flex quite a few times and think it might be an issue with floats but clearing them didn't seem to solve any obvious issues. It's likely that I'm overlooking something very simple.
Dev Page with Float Issues
.circle-box-table-container {
width: calc(100% + 42px);
margin: -10px;
overflow: hidden;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}
.col-xs-12.col-sm-12.col-md-4.circle-box-alt-blue-border {
display: inline-flex;
flex-shrink: 0;
}
I see you used height 100% inside your box. you need to modify some css,
.circle-box-content-text{
height: auto;
}
.circle-box-content-heading{
height: auto;
}
.circle-box-content-containter{
height: 100%;
}
do this way, hope your height issue will fix.
How to create this kind of layout with CSS without complex use of position:absolute
(looking for simple methods). Consider also a "responsiveness" of the page.
Any ideas?
Thank you
Check out this post for why Flexbox is the best: http://uidevdaily.com/2018/why-you-should-start-using-flexbox/. I made a Jsfiddle to answer your question: https://jsfiddle.net/q6ac134L/13/. Below is the CSS code:
div {
height: 100vh;
}
.main-container {
display: flex;
}
.col-1 {
background-color: green;
flex-basis: 100px;
}
.col-2 {
background-color: gray;
flex: 1;
}
What I want to achieve (but without the media query):
JsFiddle
#media all and (max-width: 600px) {
#wrapper {
flex-wrap:wrap;
height: 100px;
}
.center {
width: 100%;
order: 3;
}
.left{
width: 50%;
}
.right {
width:50%;
order:2;
}
}
I have 3 elements inside a wrapper, all shrinked. At desktop size, there is some space left over, however when I resize my window to a smaller dimension, at some point, elements run out of space. When that happens, I want to put the middle element to the next line. I have a solution, where the third element goes to the next line, and JSFiddle solution, where the second element goes to the next line, but always at the same static width.
So is it possible to put the middle element to the next line, when all three shrinked elements run out of space?
You can definitely wrap the line without media queries by using flex-wrap, flex-grow, flex-shrink and flex-basis to specify a minimum width that any given item should have:
#wrapper{
display: flex;
width: 100%;
height: 50px;
align-items: center;
text-align: center;
flex-wrap: wrap;
}
.right{
width: 20%;
background-color: blue;
order: 3;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}
But it's not possible to change the flex-order based solely on whether the elements "fit". For that you definitely need a media query.
I'm newish to flexbox. My current layout isn't working as well as I'd hoped - my columns are only as tall as the content within them.
+----------------+
| header |
+-+--------------+
|n|content |
|v+--------------+
+-+
empty
----------------------
I'm hoping flexbox will solve that. I'll have to retrofit my existing markup.
Page is full screen width, with a full-width header, then the rest of the page is fluid width content with a fixed width sidebar. (Some pages have a sidebar on the left, others have one on the right.)
Ideally, the two content areas will both extend to the bottom of the page (with their coloured backgrounds) but only go over the fold and scroll if the content is longer than a page.
+----------------+
| header |
+-+--------------+
|n| content |
|a| |
|v| |
--+-+--------------+--
Do I treat the entire page as the "container", in which I create two rows, one of which is split? Or do I just start the flexbox stuff with the second row that has the sidebar?
It seems to me, it has to be the former, if flexbox is to know how high my header is. Otherwise, when I set their heights to 100%, they'll go over the fold by an amount equal to my header.
I didn't see a header-and-split-columns as a simple example in the flexbox docs, but I'll continue to read and experiment.
(Naturally, it will also have to be responsive, so that, at smaller screen sizes, the elements wrap under each other to fit on a narrow screen.)
OK, gathering all the feedback I've gotten above, and borrowing heavily from here, this is what I came up with.
<div class="page-body no-nav no-aside">
<main>
<p>content</p>
</main>
<nav>nav</nav>
<aside>details</aside>
</div>
.
.wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: blue;
header {
height: 155px;
}
.page-body {
display: flex;
flex: 1;
background-color: lavender;
flex-direction: column;
min-height: calc(100vh - 155px);
min-height: -webkit-calc(100vh - 155px);
nav {
order: -1;
background-color: red;
}
aside {
background-color: orange;
}
&.no-nav nav,
&.no-aside aside {
display: none;
}
}
}
#media (min-width: 768px) {
.wrapper {
.page-body {
flex-direction: row;
flex: 1;
main {
flex: 1;
}
nav {
flex: 0 0 385px;
}
aside {
flex: 0 0 320px;
}
}
}
}
Header is fixed height
Page-body fills the rest of the page
pretty straightforward to add a footer if needed (see Holy-Grail article above)
all columns are full height, no scrolling unless content flows
sidebars are fixed width, content body is fluid
structure is responsive
added some functionality to hide/show the sidebars as-needed per page
Oddly, this defaults to small-screen as has a media query that overrides for larger screens. (Usually the other way around where I come from.)
You can use calc for the min-height (assuming header height as 50px):
.content {
min-height: calc(100% - 50px);
min-height: -webkit-calc(100% - 50px);
}
As for the fixed width sidebar, prevent it from growing or shrinking:
.sidebar {
flex-shrink: 0;
flex-grow: 0;
}
I would only put the sidebar and the content in the flex box. Put both the sidebar and the content inside a container div and assign display:flex to the container:
.container {
display: flex;
flex-direction: row;
}
You will likely need your sidebar to collapse or become fluid with media queries when the window width decreases to a certain point. Also, I find this tool helpful when working with flex, as it does get complex.
You can create two flexboxes - one to divide header and "rest", and the other inside "rest" to divide it into nav and content.
Also you can just set min-height of header, as can be seen here
I hope I've understood your question.. This approach might help get you started. Let me know if you have any specific questions...
body {
margin: 0;
height: 100vh;
font-family: sans-serif;
color: white;
}
.container {
height: 100%;
background: grey;
display: flex;
flex-direction: column;
}
header {
height: 150px;
background: blue;
}
.content {
height: 100%;
display: flex;
background: green;
}
.sidebar {
background: #76c5ff;
width: 200px;
}
.main {
background: #ef3a59;
flex: 1;
}
#media (max-width: 600px) {
body {
height: initial;
}
.content {
height: initial;
}
.content {
flex-direction: column;
}
.sidebar {
width: 100%;
order: 2; /* remove this to keep sidebar above main content */
}
}
<div class="container">
<header>header
</header>
<div class="content">
<div class="sidebar">sidebar</div>
<div class="main">main content</div>
</div>
</div>
Im trying to build a responsive navigation using flexbox. I have the desktop version looking fine. But when it enters the phone media query, I want the order of the items to change. I want the logo above the navigation links on its own line, and the 4 nav links below centrally aligned. I have tried everything so I come to the great people of stack overflow for help.
link to code:
http://codepen.io/Davabo/pen/EKNBMz
* {margin:0; padding:0; font-weight: normal;}
$phone: 480px;
#mixin phone {
#media (max-width: #{$phone}) {
#content;
}
}
.menu{
display:flex;
height: auto;
max-width: 100%;
a{text-decoration:none;color: black;padding:20px;}
& > div {
flex: 2;
font-size: 20px;
text-align: center;
padding-top: 30px;
}
.logo {
width: 100%;
flex: 1;
padding-top: 40px;
text-align: center;
}
#include phone {
.logo {
background: pink;
text-align: center;
flex: 5;
flex-grow: 5;
}
.nav1, .nav2 {
flex-basis: 100%;
width: 100%;
}
}
}
I have attached what I want the phone navigation to look like:
http://prntscr.com/afwt0g
Thank you so much for any help!
You need to use a combination of the order and flex-grow properties on the items e.g.
#media screen and {max-width: 480px){
.menu{flex-wrap: wrap;}
.logo{order: 1; flex-grow: 2;}
.nav1{order: 2; flex-grow: 1;}
.nav2{order: 3; flex-grow: 1;}
}
Order rearranges the order of items within a flex container.
Flex-grow works out the sizing of an element compared to it's siblings within a flex container
wrap on the container forces items to wrap when the container width forces it
Here is a link to a good flexbox resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/