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)
Pokazywanie postów oznaczonych etykietą flexible box layout module. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą flexible box layout module. Pokaż wszystkie posty
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.
wtorek, 1 października 2013
CSS Flexible box layout module - part 3 - Positioning on main and cross axis
Positioning flex items alongside main axis we should to remember this image:
It means we should forget about float and use just justify-content property:
For cross-axis it is similar as for main axis, but some properties change:
It means we should forget about float and use just justify-content property:
justify-content: flex-start; /* aligns flex item to main start */
justify-content: center; /* centers flex item alongside main axis */
justify-content: flex-end; /* aligns flex item to main end */
justify-content: space-between; /* puts space between flex items and spreads them on all available space*/
justify-content: center; /* centers flex item alongside main axis */
justify-content: flex-end; /* aligns flex item to main end */
justify-content: space-between; /* puts space between flex items and spreads them on all available space*/
justify-content: space-around; /* puts space around flex items and spreads them on all available space */
For cross-axis it is similar as for main axis, but some properties change:
align-items: flex-start; /* aligns flex item to cross start */
align-items: center; /* centers flex item alongside cross axis*/
align-items: flex-end; /* aligns flex item to cross end */
align-items: center; /* centers flex item alongside cross axis*/
align-items: flex-end; /* aligns flex item to cross end */
align-items: baseline; /* all flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line. */
align-items: stretch; /* flex items are stretched such as the cross-size of the item's margin box is the same as the line while respecting width and height constraints. */
środa, 19 czerwca 2013
CSS Flexible box layout module - part 2 - Basics
In the beginning...
In the beginning we would like to know some vocabulary:
Flex container – DOM element which contains flex items. It defines available spaces for its children.
To create a flex container use display property with “flex” or “inline-flex” value;
Because it is still Candidate Recommendation, browsers implement it as an experiment, so we need to use prefixes. There are 3 syntaxes – new (standard), old and mid (legacy syntax). In the end of this article I've added some links explain syntax for some of properties. In this article I use standard syntax without prefixes.
flex item – child element of flex container
main axis – axis defined by flex-direction property in flex container, by default it is X-axis (row/row-reverse value)
cross-axis – perpendicular to the main axis.
In the beginning we would like to know some vocabulary:
Flex container – DOM element which contains flex items. It defines available spaces for its children.
To create a flex container use display property with “flex” or “inline-flex” value;
section {
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
}
display: -webkit-box; /* OLD: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* OLD: Firefox (buggy) */
display: -ms-flexbox; /* MID: IE 10 */
display: -webkit-flex; /* NEW, Chrome 21+ */
display: flex; /* NEW: Opera 12.1, Firefox 22+ */
}
Because it is still Candidate Recommendation, browsers implement it as an experiment, so we need to use prefixes. There are 3 syntaxes – new (standard), old and mid (legacy syntax). In the end of this article I've added some links explain syntax for some of properties. In this article I use standard syntax without prefixes.
flex item – child element of flex container
main axis – axis defined by flex-direction property in flex container, by default it is X-axis (row/row-reverse value)
cross-axis – perpendicular to the main axis.
CSS Flexible box layout module - part 1 - Introduction
Long long time ago...
Maybe not so long, but some years ago all layouts used tables as a base. It was nice time and almost everything was possible using table cells. But document structure and semantic were completely unreadable and layouts were not flexible. So we got “CSS box model” which we still use today. It is semantic way (especially if use HTML5 tags) to create layout. But it still generates problems. Especially related to calculation of width/height of elements. Setting width of element on 10% and adding border and padding increases element width from 10% to 10% + border + padding.
Flexbox
Flexible box layout is like an answer for all those troubles. It is flexible, semantic and uses available space without specific units. Sounds great, but what exactly does it mean?
Imagine you have a DOM element like section, inside it you want to position n children elements, and you want every of those children to have the same width. As long as you don't know number of children elements it is hard to code. But flexbox gives a possibility to do this without any calculation. How? It is quite simple, but first we need to know how flexbox works.
Maybe not so long, but some years ago all layouts used tables as a base. It was nice time and almost everything was possible using table cells. But document structure and semantic were completely unreadable and layouts were not flexible. So we got “CSS box model” which we still use today. It is semantic way (especially if use HTML5 tags) to create layout. But it still generates problems. Especially related to calculation of width/height of elements. Setting width of element on 10% and adding border and padding increases element width from 10% to 10% + border + padding.
Flexbox
Flexible box layout is like an answer for all those troubles. It is flexible, semantic and uses available space without specific units. Sounds great, but what exactly does it mean?
Imagine you have a DOM element like section, inside it you want to position n children elements, and you want every of those children to have the same width. As long as you don't know number of children elements it is hard to code. But flexbox gives a possibility to do this without any calculation. How? It is quite simple, but first we need to know how flexbox works.
Subskrybuj:
Posty (Atom)