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
Related
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.
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
In bootstrap grid, if I add another class after the row, then the columns are messed up. So in this example, the content is shown below each other instead of having two equal columns
<div class="row">
<div class="inside">
<div class="col-sm-6">
<p>sample content</p>
</div>
<div class="col-sm-6">
<p>sample content</p>
</div>
</div>
</div>
here is a live demo using bootstrap 4 with problem
and here is the live demo with bootstrap 3 which works without any issue.
the same structure works fine on bootstrap 3.x, just not with bootstrap 4.
The issue is with adding <div class="inside"> after row which I should add (I can't remove it). Any solution to fix this issue?
Add the following CSS:
.inside {
display: flex;
flex-basis: 100%;
flex-wrap: wrap;
}
The reason is Bootstrap 4 now uses flex to display grid, so .row basically has a property of display: flex;. You only need to make the inside div replicate the behavior.
On this website: http://www.livenews.surf/ I want to make news images and text vertically middle align, how i can do that?
Use the following classes in your containing div.row instead of custom CSS as suggested for bootstrap 4.
d-flex flex-wrap align-items-center
The easiest solution is to use Flexbox (see spec. for more details on it's usage).
For this particular case, assign a custom class to each of your content containing div (currently it only has .col-md-11), for example class "content" and add this code to your stylesheet
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Small code explanation: align-items aligns the items vertically, since we left the default flex direction which is row and flex-wrap will allow our parent container to wrap children to next line (default is nowrap).
Keep in mind, that I haven't included vendor prefixes for the sake of this answer, however I would strongly recommend you to do so, using a tool such as Autoprefixer.
Well, As you are using bootstrap columns, so you will need to make by following a couple of steps as explained below:
As a general case html structure of your web page is as follows:
<div class="col-md-11">
<div class="col-md-5">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
<div class="col-md-7">
// text goes here
</div>
</div>
First of all you will need to make the height of both columns (image + text) same. For this you can use jQuery matchHeight.
After that you can make your images vertically centered with the help of following change.
<div class="col-md-5 photo">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
.photo {
display: table;
}
.photo a {
vertical-align: middle;
display: table-cell;
}
.photo img {
display: block;
height: auto;
width: 100%;
}
Here is Plnkr.
I have a flexbox container with 2 columns. I want the columns to stack when there isn't room to display them both. I use the following html/css
<div class="container">
<div class="column">
<div>Short content</div>
<div>This is some longer content to show problem</div>
<div>Short contetn</div>
</div>
<div class="column">
<div>Short content</div>
<div>This is some longer content to show problem</div>
<div>Short contetn</div>
</div>
</div>
and
.container {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1 0 auto;
/* grow, don't shrink */
}
JS fiddle here: http://jsfiddle.net/AsdNS/
It seems that there is implicitally white-space: nowrap on the inner divs, but I don't want this. If I did want it surely I would specify it in my css. Is there a way to not wrap whitespace and then only wrap the columns if a single block of text with no whitespace is too big?
In practice I want to force it to wrap on some whitespace, but not others (I will use <span>s)
EDIT Here is a more real-world jsfiddle: http://jsfiddle.net/W7g3U/1/
What I want is for the long div to wrap, but the short divs not to.
EDIT 2 Here is what I want to achieve (works in chrome) http://plnkr.co/edit/Ppoe8xJrrbC16Y1vyWCD