CSS - setting elements inline - part 1

I bet that every frontend developer met the problem with setting many elements in line. As lately I had to solve this problem during recruitment processes I decided to share some thoughts and solution.

Example structure:

<div class="container">
    <div class="color green"></div>
    <div class="color yellow"></div>
    <div class="color blue"></div>
    <div class="color red"></div>
</div>

Let's color elements to see them clearly:

.color {
    width: 25%;
    display: inline-block;
    height: 100px;
    padding: 0;
    margin: 0;
} .green {
    background-color: green;
}
.yellow {
    background-color: yellow;
}
.blue {
    background-color: blue;
}
.red {
    background-color: red;
}

So we have a container, which contains few elements, and looks like on this image:



So this is definitely not the goal. The inner elements should be in line and without gaps between. Why are there those gaps? The answer is display: inline-block;. Displaying inline takes all white spaces as a spaces... and spaces have width, so last element is going down, as there is no space for it. So how to remove gaps between elements?

change boxing-size:

div {
    boxing-size: border-box;
}

CSS Flexible box layout module - part 7 - Conclusions and links

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)

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.

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 */

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;
}

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.

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.

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 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.

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:

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: 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: 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. */

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;

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+ */
}

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.

Nieplanowany odstep miedzy obrazkami

Mam sobie <figure> a w srodku 2 <img>. <figure> ma ustawiona szerokosc, zeby obrazki wyswietlaly sie jeden pod drugim. Wszystko niby gra i buczy, ale... pomiedzy obrazkami pojawila sie przestrzen. Tak na oko jakies 2 pixele szerokosci.

No ki diabel... zaczelam sprawdzac moje style, czy aby nie mam gdzies jakiegos marginesu, paddinga czy innej ramki ustawionej, ale nic, czysto.

Roywiazanie oczywiscie jest banalnie proste. Wystarczy dodac obrazkom wlasciwosc display: block; i wszystkie tajemnicze odstepy, przestrzenie itp znikaja :D

CSS3 media queries nie dzialaja?!?

No wlasnie, zakodowalam layout dla wersji mobilnej naszej strony, pod zwykla przegladarka moje czary z fluid layout i CSS3 media queries dzialaja az milo. Ale zanim pokaze komukolwiek wyniki swojej pracy postanowilam sama przetestowac. No i zonk... Strona i owszem laduje sie... ale... w stylach dla szerokosci ekranu 481-980px, a skrypt JS mi wyswietla, ze ekran ma 320px.

No ki diabel??

Szukam i szukam, sprawdzam, czego mi zabraklo i...

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Winowajca sie znalazl. meta viewport jest jednak niezbedne :)

jak zlikwidowac podwojne ramki w miejscu stykania sie dwoch elementow?

Wlasciwosc border-collapse: collapse; rozwiaze wszystkie Wasze problemy :) U mnie przy okazji zmotywowala przegladarki, zeby w ogole pokazywaly ramki dla elementu tr (cos mi sie skonfliktowalo w baaardzo starych cssach).

Pozycjonowanie tekstu

Wyśrodkowanie tekstu w pionie i poziomie nie zawsze jest najłatwiejszą sprawą. Widać to zwłaszcza po różnych pomysłach, np div w znaczniku p, przezroczysty 1px gif, który jest rozciągany i wstawiany tak, żeby przesunąć tekst względem dowolnego elementu itp.

Najprostszym sposobem jest użycie dwóch właściwości css:
- text-align (wyśrodkowanie w poziomie)
- line-height (wyśrodkowanie w pionie).

Użycie jest dość proste i wyjaśnione na podlinkowanych stronach. Od siebie dodam, że text zawsze będzie się wyświetlał dokładnie w połowie wysokości linii, tak więc ustawiając wartość line-height na równą wysokości kontenera mamy pewność, że tekst będzie wyśrodkowany w pionie.

overflow - co to jest?

Do niedawna używałam overflow trochę na chybił trafił. Jak coś mi nie banglało to sprawdzałam, czy może overflow: hidden nie rozwiąże problemu. Takich opcji awaryjnych mam kilka i fakt, że nie do końca wiem KIEDY należy je stosować wynika tylko z mojego lenistwa a nie z tego, że jest to jakaś wiedza tajemna.

Ale wracając do overflow. Kumpel kilka dni temu uderzył do mnie ciemną nocą z zapytaniem, jak w divie zrobić pasek przewijania. Widziałam takie rzeczy na kilku stronach, ale sama się w to nie bawiłam, w sumie nigdy nie było potrzeby. Szybki przegląd mojej wiedzy i wniosek jeden - nie wiem. Ale od czego mamy google.

Odpowiedź z googla dość jendoznaczna: overflow:scroll;. I wtedy EUREKA!! overflow decyduje o zachowaniu diva względem jego treści, a zwłaszcza tej treści, która w wyżej wymienionym divie się nie mieści. Jak dam hidden, to ta treść nie będzie widoczna, jak dam scroll to pojawi się pasek przewijania umożliwiający jej przeglądanie.

Zainteresowanych odsyłam do strony dokładnie opisującej co i jak :) tutaj.