Conclusions
CSS flexible box layout module is an amazing tool to make web pages flexible without any calculations. It makes our containers just fit to the available space and act as we want them on different screen sizes. It will take some time as browser vendors will implement all features and we could use it without vendor prefixes. But it is worthy to wait and read about flexbox, to find callbacks for older browsers to make it ready to use as fast as possible.
Links
It doesn't make any sense to copy information from some useful sites. Please check this links and enjoy all opportunities flexbox provides!
http://www.w3.org/TR/css3-flexbox/ (official specification)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
http://umaar.github.io/css-flexbox-demo/
http://caniuse.com/flexbox (which browsers support flexbox)
http://css-tricks.com/using-flexbox/ (vendor prefixes tables)
poniedziałek, 10 lutego 2014
CSS Flexible box layout module - part 6 - Setting elements in more than one line
Not known amount of flex items not always can be solved with flex-grow property. Sometimes there are too many items to get fit on one line. Then we can put them in many lines using flow-wrap property on flex container.
So if we have style definitions like:
The result will change, depending on browser window width:
1. For section has a 760px of width:
2. section has a 480px of a width:
flow-wrap: nowrap; /* forces flex container to display all flex items in one line */
flow-wrap: wrap; /* allows flex container to display flex items in multiple lines, direction is defined by flex-direction */
flow-wrap: wrap-reverse; /* the same as “wrap”, opposite to direction defined by flex-direction */
flow-wrap: wrap; /* allows flex container to display flex items in multiple lines, direction is defined by flex-direction */
flow-wrap: wrap-reverse; /* the same as “wrap”, opposite to direction defined by flex-direction */
So if we have style definitions like:
section {
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
}
div {
background-color: #C0C0C0;
margin: 7px;
flex-grow: 1;
}
border: 1px solid #000000;
display: flex;
flex-wrap: wrap;
}
div {
background-color: #C0C0C0;
margin: 7px;
flex-grow: 1;
}
The result will change, depending on browser window width:
1. For section has a 760px of width:
2. section has a 480px of a width:
CSS Flexible box layout module - part 5 - Changing order of elements
On interactive pages it is common that DOM elements move, disappear or appear as a result of user's behavior. CSS3 provides very useful property order, to ordering elements inside flex container. By default all flex items belong to one ordinal group – 0. If we want to change place of specific flex item, easiest way is to change its ordinal group number. Value of this property is an integer and represents the ordinal group the flex item has been assigned. Items are ordered by ascending ordinal group number.
So if we have 6 flex items inside flex container and define order: 1; for the first one, than it will be displayed in the end of flex container. Elements that belong to the same ordinal group are displaying in the order from HTML.
So if we have 6 flex items inside flex container and define order: 1; for the first one, than it will be displayed in the end of flex container. Elements that belong to the same ordinal group are displaying in the order from HTML.
CSS Flexible box layout module - part 4 - Altering flex items dimensions to fill the available space
We have a flex container and inside we have not known amount of flex items, and we want them to fill available space. For this we have to use flex-grow property on flex items.
How flex-grow property works? Browser sums values of flex-grow property in flex items and then alter flex items width to be equal x/sum of all available space. For example, if we have 3 flex items, and every has flex-grow: 1;, it means that every flex element takes 1/3 of available space.
This is an example, where first flex item has flex-grow: 1; second one has flex-grow:3 and last one has flex-grow: 2;
But there is more properties related to filling available space. We can define flex-shrink property with number as a value and flex-basis with a proper width as a value.
flex-basis defines the ideal width of flex item, together with flex-grow define how flex items should look like on different screens. If flex-basis is defined flex-grow define which part of available space will take flex item.
Example 1.1
We have 499px width flex container with 2 flex items (A and B). Both flex items have 200px width, but A has flex-grow: 1; and B has flex-grow: 2;. So we have 400px reserved for width of both flex items and 99px of extra available space. It means that all available space we have – 99px – we need to divide on 3 parts (because we sum flex-grow of both elements, 1 + 2 = 3) and element A gets 1/3 * 99 = 33px and B: 2/3 * 99 = 66px. So in browser we will see element A width 233px and element B width 266px;.
Example 1.2
But what happens if there is no available space? If there is no available space flex-grow is not used. Assuming, both items (A and B) have the same value of flex-basis: 200px;, and flex container has width: 300px;. There is no space for two flex items, so their widths will be recalculated based on given flex-basis. Our flex items are the same, so every will take ½ of flex container width.
Example 1.3
But what if we have flex items with different value of flex-basis property? For example A has 200px and B 150px. Flex container still has 300px of width. Both flex items need to be squeezed to fit the available spaces. Browser gets a factor dividing available space (300px) on counted from flex items flex-basis properties (350px). Then uses this factor (~0.85) to calculate new widths of flex items. Flex item A will have 171px and B will have 129px.
flex-shrink defines, how flex item shrinks, if there is no available space, in comparison to other flex items in flex container.
Example 1.4
Assuming, we have flex container 300px width and inside are 2 flex items (A and B), and every has flex-basis equal 200px. Item A has flex-shrink: 1; and B has flex-shrink: 2;. Here it is a little more complicated. First browser calculates how much more space is needed (400px-300px=100px), then divides it on sum flex-shrink values of all flex items (100/3 = 33.3). Then calculates what amount should subtract from given flex-basis value using flex-shrink. For flex item A it will be 33.3x1 (flex-shrink: 1;), so item A will have 167px of width. Flex item B will have 133px, (200px – (33.3px x2)).
Example 1.5
Let's mix examples and take hardest version. So we have flex container 300px width. Inside it contains 2 flex items (A and B). Item A has flex-basis: 200px; and flex-shrink: 1; item B has flex-basis: 150px; and flex-shrink: 2;. So what is a result? Item A is 180px width and item B 120px. Why? Because item B shrinks more than item A. In this case, item A was squeezed by 10% and item B by 20%, 2 times more, just as flex-shrink property was set.
flex-grow: x;
How flex-grow property works? Browser sums values of flex-grow property in flex items and then alter flex items width to be equal x/sum of all available space. For example, if we have 3 flex items, and every has flex-grow: 1;, it means that every flex element takes 1/3 of available space.
This is an example, where first flex item has flex-grow: 1; second one has flex-grow:3 and last one has flex-grow: 2;
But there is more properties related to filling available space. We can define flex-shrink property with number as a value and flex-basis with a proper width as a value.
flex-shrink: x;
flex-basis: Xpx;
flex-basis: Xpx;
flex-basis defines the ideal width of flex item, together with flex-grow define how flex items should look like on different screens. If flex-basis is defined flex-grow define which part of available space will take flex item.
Example 1.1
We have 499px width flex container with 2 flex items (A and B). Both flex items have 200px width, but A has flex-grow: 1; and B has flex-grow: 2;. So we have 400px reserved for width of both flex items and 99px of extra available space. It means that all available space we have – 99px – we need to divide on 3 parts (because we sum flex-grow of both elements, 1 + 2 = 3) and element A gets 1/3 * 99 = 33px and B: 2/3 * 99 = 66px. So in browser we will see element A width 233px and element B width 266px;.
Example 1.2
But what happens if there is no available space? If there is no available space flex-grow is not used. Assuming, both items (A and B) have the same value of flex-basis: 200px;, and flex container has width: 300px;. There is no space for two flex items, so their widths will be recalculated based on given flex-basis. Our flex items are the same, so every will take ½ of flex container width.
Example 1.3
But what if we have flex items with different value of flex-basis property? For example A has 200px and B 150px. Flex container still has 300px of width. Both flex items need to be squeezed to fit the available spaces. Browser gets a factor dividing available space (300px) on counted from flex items flex-basis properties (350px). Then uses this factor (~0.85) to calculate new widths of flex items. Flex item A will have 171px and B will have 129px.
flex-shrink defines, how flex item shrinks, if there is no available space, in comparison to other flex items in flex container.
Example 1.4
Assuming, we have flex container 300px width and inside are 2 flex items (A and B), and every has flex-basis equal 200px. Item A has flex-shrink: 1; and B has flex-shrink: 2;. Here it is a little more complicated. First browser calculates how much more space is needed (400px-300px=100px), then divides it on sum flex-shrink values of all flex items (100/3 = 33.3). Then calculates what amount should subtract from given flex-basis value using flex-shrink. For flex item A it will be 33.3x1 (flex-shrink: 1;), so item A will have 167px of width. Flex item B will have 133px, (200px – (33.3px x2)).
Example 1.5
Let's mix examples and take hardest version. So we have flex container 300px width. Inside it contains 2 flex items (A and B). Item A has flex-basis: 200px; and flex-shrink: 1; item B has flex-basis: 150px; and flex-shrink: 2;. So what is a result? Item A is 180px width and item B 120px. Why? Because item B shrinks more than item A. In this case, item A was squeezed by 10% and item B by 20%, 2 times more, just as flex-shrink property was set.
Subskrybuj:
Posty (Atom)