Flexbox not displaying full width of page - html

I'm trying to use Flexbox to create my own grid. I don't want to use Bootstrap or any other framework, so please don't link any of them.
In my flex-container, I want to display two sections which are both 100% of the page's width. So one section should be positioned on top of the other. Instead, each section is being given 50% of the page's width even when I explicitly defined 100%. I have no idea why this is happening. The browser's developer tools don't lead me to any conclusions either.
I reconstructed the problem in a jsFiddle. I get the expected result if, let's say, I define one section to be 7/12 the page's width and the other section to be 5/12 the page's width.
HTML
<div class="flex-container">
<div class="flex-12">
<h4>Title</h4>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
<p class="flex-2">Content</p>
</div>
<div class="flex-12">
<h4>Title 2</h4>
</div>
</div>

Need to tell the container to permit wrapping as the default is nowrap.
.flex-container {
display: flex;
flex-wrap:wrap;
}
Jsfiddle Demo

You can use also use flex-direction column:
.flex-container {
display: flex;
flex-direction: column;
}

Related

HTML, CSS Flex col: One element content is bigger than others in a row

I'm just wondering, how can I prevent these situations when the title is larger and then it forces content to loose their bottom padding. I'm using tailwind so the classes represent what my content styles are:
grid-item styles: flex flex-col gap-4
content styles inside grid-item: flex flex-col gap-4 px-5 pb-6
Maybe I need to set a min-height for grid? or should I play with flex?
Try the below code snippet:
.row{
display:flex;
gap: 10px;
padding:10px 0;
background: #efefef;
}
.row .col{
background:#fff;
}
.row .col h4{
text-overflow:ellipsis;
overflow: hidden;
max-width:120px; /* Specify width of heading, after that width everything would be hidden */
white-space:nowrap;
}
<div class="row">
<div class="col">
<h4>Heading 2</h4>
<p>The text-overflow property may be specified using one or two values.</p>
</div>
<div class="col">
<h4>Heading 2 is of column two is bigger than others</h4>
<p>The text-overflow property may be specified using one or two values.</p>
</div>
<div class="col">
<h4>Heading 2</h4>
<p>The text-overflow property may be specified using one or two values.</p>
</div>
</div>
By using text-overflow: ellipsis in css we can prevent the different box height. In which every heading would be shown in single line. if anything exceed the heading width it will be hidden and ... will placed after it.
I hope this will resolved your issue.

How to use wrapper div & using flexbox on sections

I'm building my first website, and I am having some issues figuring out how to combine a wrapper that limits the max-width of the content and using flexbox on a section.
A typical section of my website would look like:
<section class="hero flex">
<div class="wrapper">
<h1>Content 1</h1>
<p>Content 2</p>
<button>Content 3</button>
</div>
</section>
I am running into the following problems:
When adding the wrapper div between section & the content, the content is no longer direct children of section, and thus are not affected by the flexbox. Therefore I cannot center the content.
If I put the classes .hero and .wrapper on the section tag, the background color is affected by the width/max-width of wrapper
I'm sure that I'm running into more problems that I still haven't found yet. I am therefore interested in how to use a wrapper for limited max-width together with flexbox sections.
.hero{
max-width: 700px;
}
.wrapper{
width: 100%;
display: flex;
justify-content: space-between;
}
<section ="hero flex">
<div class="wrapper">
<h1>Content 1</h1>
<p>Content 2</p>
<button>Content 3</button>
</div>
</section>

Unexpected distortion in flex-box

I have a three even columns using flexbox. In CodePen it looks more clear: https://codepen.io/pixy-dixy/pen/KKVwvoQ
Here is the code:
.rowIdeas {
text-align: center;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
}
.columnIdeas {
flex-basis: 25%;
}
.maxSize {
max-height: 300px;
}
<!-- about ideas section start -->
<div class="rowIdeas">
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/philosophy.svg">
<h2>Item one</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
<div class="idea columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/idea.svg">
<h2>item two</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).
</div>
</div>
<div class="columnIdeas iransansdnlight">
<div>
<img class="maxSize" src="https://langfox.ir/vc/results.svg">
<h2>item three</h2>
<p>Flex items do not need to be block level unless the content they contain requires it. Also, you've prefixed all of the display properties, but didn't prefix any of the other Flexbox properties (which have different names in the other drafts).</p>
</div>
</div>
</div>
<!-- about ideas section ends -->
The code works fine here and in CodePen, but when I put the same code in my landing page, I see this:
As you see the first one goes a bit upper than others.
Any idea what the problem is?
The problem is that the svg images are differnt proportions. So the one on the left is actually shorter, so the title doesn't drop as low as the others. You'll have to either give them a specific height, remake it so they're all the same height, or otherwise account for the varying sizes.

Flexbox items spilling over into header

I am building a personal website, and have been using a lot of flexbox to attain the layout I want. I recently ran into an issue that I cannot seem to solve. Where the items in my flexbox container seem to be spilling out and into other containers, such as my header container or past the bottom of where the page should end.
<div class="main-container">
<div class="header">
<h1>John Doe</h1>
<h2>Test</h2>
</div>
<div class="content-container">
<div class="projects">
<div class="content-container">
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
<div>
<h1>project</h1>
<p>project text</p>
</div>
</div>
</div>
</div>
</div>
https://codepen.io/anon/pen/XYBbgE
I wanted to use a flexbox layout for my projects section so that the content will be centered, and I like how easy it is to do that with flexbox. If you adjust the height of the codepen container by either increasing the height OR reduce it, you can see that the header is hiding some of the elements.
I have included some HTML to kind of show the layout. I have excluded a lot to conserve space, however the codepen link is much closer to what the actual design looks like.
EDIT: I made a gif demonstrating the behavior that I am having an issue with
gif of flexbox problem
As you can see, as I adjust the height, the header of my page appears to cover up some of the items beneath it. I also cannot scroll higher than what the height is, if that makes sense.
To point out your error, it's the alignment of item's, for all elements you have aligned it center vertically. so it seemed out of a container as it's height was more than viewport. You can fix it by align-items: center; to align-items: flex-start;
.projects {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
}
and to let you know, i think you are using too flex for everything which can be achieved without it easily

margin and equal height column problems with flex-box

I made my way to the first attempt on the css3 flex-box. I decided to write a small frame work to play with.
The requirements are quite straight forward - it has to be as minimal as possible, define sizes of boxes and grid while class is only set to parent element. So I came up with something in this fashion
[class*="w-all"] {
display: flex;
flex-flow: row wrap;
}
.row {align-items: flex-start;}
.cols {display:flex; flex: 1 auto}
.w-25, .w-all-25>* {width:25%}
.w-33, .w-all-33>* {width:33.333333333%}
.w-38, .w-all-38>* {width:38.196601125%}
.w-62, .w-all-62>* {width:61.803398875%}
and HTML part
<div class="wrap">
<div class="row cols">
<section class="w-62 w-all-33">
<article>
<h2>header</h2>
<p>paragraph text</p>
</article>
</section>
<aside class="w-38 w-all-25">
<article>
<h2>header</h2>
<p>paragraph text</p>
</article>
</aside>
</div>
</div>
For the most part - it works just fine. Direct children of element with class set to cols are main columns and inside those we have grids.
Here's a live example on JSFiddle(http://jsfiddle.net/DGb7k/)
The problem is: main columns aren't equal height (grids are working properly)
Also, how do I apply margins to elements on the grid? OR I should ask: can I make it different to this (px/em/rem margins are much appreciated)
[class*="w-all"] {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
.w-all-25>* {width:22%}
.w-all-33>* {width:31.333333333%}
http://jsfiddle.net/jc5N6/
you misuse the align-self rule. I guess you are looking for the strecth value , not flex-start: http://jsfiddle.net/DGb7k/1/
Never mind how silly it is to answer your own question...
The fix, as I excepted, was totally simple
[class*="w-all"], .cols {display: flex;}
[class*="w-all"] {flex-flow: row wrap;}
Here's a Fiddle of a live example http://jsfiddle.net/DGb7k/3/
However margin is still a live problem