Css flexbox css tricks

Css flexbox css tricks

Responsive Layouts, Fewer Media Queries

We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren’t going anywhere. Since the introduction of …

Minding the “gap”

You might already know about the CSS gap property. It isn’t exactly new, but it did gain an important new ability last year: it now works in Flexbox in addition to CSS Grid. That, and the fact that I …

Equal Columns With Flexbox: It’s More Complicated Than You Might Think

As awesome as flexbox is, what it’s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top of that, flex-shrink is also doing some work allowing the items to be smaller, but only if needed. Let’s break those two down and see how they work together.

Float an Element to the Bottom Corner

Need to lay out an element to the right or the left, such that text wraps around it? That’s an easy task for the float property. But what about if you also want to push that element (let’s call it …

How to Make an Area Chart With CSS

You might know a few ways to create charts with pure CSS. Some of them are covered here on CSS-Tricks, and many others can be found on CodePen, but I haven’t seen many examples of “area charts” (imagine …

Understanding flex-grow, flex-shrink, and flex-basis

When you apply a CSS property to an element, there’s lots of things going on under the hood. For example, let’s say we have some HTML like this:

#196: Learning Grid & Flexbox with Kyle Simpson

Kyle is a JavaScript guy. He knows a ton about the web, and plenty about CSS too, but isn’t as up-to-date on modern CSS layout tools like flexbox and grid. We didn’t go from 0 to 100 here, but …

Balancing on a Pivot with Flexbox

Let me show you a way I recently discovered to center a bunch of elements around what I call the pivot. I promise you that funky HTML is out of the question and you won’t need to know any …

Achieving Vertical Alignment (Thanks, Subgrid!)

Our tools for vertical alignment have gotten a lot better as of late. My early days as a website designer involved laying out 960px wide homepage designs and aligning things horizontally across a page using a 12-column grid. Media queries …

Holy Albatross with Widths

Heydon’s Holy Albatross is a technique to have a row of elements break into a column of elements at a specific width. A specified parent width, not a screen width like a media query would have. So, like a container …

Grid for layout, flexbox for components

When should we reach for CSS grid and when should we use flexbox? Rachel Andrew wrote about this very conundrum way back in 2016:

Источник

Css flexbox css tricks

Технология flexbox обещает спасти нас от проблем линейного CSS (таких как например вертикальное выравнивание).

В Firefox уже можно опробовать эту технологию. Однако освоение новой модели позиционирования может быть не таким простым.

Давайте посмотрим как работает flexbox, как мы можем использовать его для более простого позиционированния элементов.

Принцип позиционирования flexbox позволяет гибко и интуитивно строить лэйаут.

Чтобы достичь этого, он позволяет элементу контейнеру самому решать как расположить дочерние элементы.

Всё это хорошо звучит в теории. Но давайте посмотрим как это выглядит на практике.

В этой статье мы рассмотрим 5 наиболее распространённых свойств модели flexbox. Мы рассмотрим как можно использовать их и как будут выглядеть результаты.

Свойство 1: display: flex

У нас есть четыре разноцветных элемента различных размеров, все находятся в одном контейнере. По умолчанию, свойство display для каждого элемента установлено в block. Таким образом, каждому элементу отводится строка по всей ширине.

Для того чтобы воспользоваться преимуществом flexbox, необходимо сообщить об этом контейнеру.

Не так уж и много изменений, элементы выстроились в линию. Но за сценой произошло гораздо большее. Эти элементы получили нечто, называемое flex context.

Теперь можно позиционировать их внутри этого контекста, затрачивая на это гораздо меньше усилий, чем в традиционном CSS.

Свойство 2: flex-direction

У контейнера две оси координат, которые схематично выглядят так:

По умолчанию дочерние элементы выстраиваются вдоль основной оси слева направо. Именно поэтому элементы из предыдущего примера расположились горизонтально как только мы прописали контейнеру display: flex.

Свойство flex-direction позволяет изменять это поведение.

Одно важное замечание: flex-direction: column не выравнивает элементы вдоль второстепенной оси (cross axis), а делает второстепенную ось основной.

Есть ещё два значение для этого свойства: row-reverse и column-reverse.

Свойство 3: justify-content

Свойство justify-content управляет размещением элемента вдоль главной оси.

всего существует 5 значений для этого свойства:

Разница между значениями space-around и space-between такова: space-between выделяет равное пространство между элементами, а space-around равное пространство вокруг каждого элемента, сдвигая его таким образом от контейнера.

Запомните: justify-content действует только вдоль главной оси, а flex-direction переключает оси. Это важно для следующего свойства.

Свойство 4: align-items

Свойство align-items работает точно так же как и justify-content, только вдоль второстепенной оси.

Всего существует 5 значений:

Первые три точно такие же как и у justify-content, поэтому не будем их рассматривать ещё раз, а перейдём сразу к двум другим.

stretch выравнивает элементы по высоте, а baseline по нижней части параграфа.

Для значения stretch, также необходимо элементам установить высоту в auto.

По поводу baseline, будьте внимательны, если у вас не будет ни одного параграфа в элементах, они будут выровнены по нижней части, вот так:

Для того чтобы продемонстрировать принцип главной и второстепенной осей, давай скомбинируем свойства justify-content и align-items и посмотрим как работает центрирование различных значений свойства flex-direction.

Со значением row, элементы выравниваются вдоль горизонтальной оси, column — вертикальной.

Свойство 5: align-self

Свойство align-self позволяет вручную управлять выравниванием конкретного элемента.

Оно переопределяет значение свойства align-items. Все значения точно такие же как и у align-items, кроме auto, которое установлено по умолчанию и означает что надо выравнивать как указано у контейнера.

#container < align-items: flex-start; >.square#one < align-self: center; >// только этот элемент будет центрирован 

Давайте посмотрим как это будет выглядеть. Присвоим align-self для первых двух элементов, а для остальных применим align-items: center и flex-direction: row.

Заключение

Конечно это был только обзор основных свойств, но их уже достаточно чтобы решить большинство проблем с лейаутом.

Источник

Using Flexbox: Mixing Old and New for the Best Browser Support

Flexbox is pretty awesome and is certainly part of the future of layout. The syntax has changed quite a bit over the past few years, hence the “Old” and “New” syntax. But if we weave together the old, new, and in-between syntaxes, we can get decent browser support. Especially for a simple and probably the most common use case: order-controlled grids

A semantically meaningless wrapper goes around the three main areas and will set the flexbox context. Each of the areas is semantically marked up and will be turned into columns.

 
 
Main content: first in source order
   

The end result looking like this:

We need to make the container for our columns a flexbox display context. Just by doing this, all direct children of this element become flex items. Doesn’t matter what they were before, they are flex items now. Right away we need to weave the old, new, and tweener syntaxes together. Order is important here. Since the display property itself isn’t prefixed, we need to make sure we don’t override newer syntaxes with older syntaxes for browsers that still (and probably always will) support both.

Controlling Column Widths

Our goal here is a 20% / 60% / 20% grid. Step 1 is to set our main content to the 60%.
Step 2 is to set the outside sidebars to fill the remaining space equally. Again we need to weave together old, new, and tweener syntaxes.

.main-content < width: 60%; >.main-nav, .main-sidebar < -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-flex: 1; /* OLD - Firefox 19- */ width: 20%; /* For old syntax, otherwise collapses. */ -webkit-flex: 1; /* Chrome */ -ms-flex: 1; /* IE 10 */ flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ >

In the new syntax, setting the width for the sidebars isn’t necessary as it will fill the remaining 40% equally making them both 20%. But I found not setting it cause some width collapsing with the old syntaxes.

We want the main content to visually appear in the middle, but be first in the source order. Easy cheesy in flexbox, but of course we need to weave together the new, old, and tweener syntaxes.

.main-content < -webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */ -moz-box-ordinal-group: 2; /* OLD - Firefox 19- */ -ms-flex-order: 2; /* TWEENER - IE 10 */ -webkit-order: 2; /* NEW - Chrome */ order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */ >.main-nav < -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; >.main-sidebar

• Chrome any
• Firefox any
• Safari any
• Opera 12.1+
• IE 10+
• iOS any
• Android any

The biggest limiting factor of course being IE, but otherwise it’s pretty good. If you’re doing a mobile-specific version of a site, you’re in even better shape. If someone can test it on Windows Phone, lemme know.

Firefox 19- is a bit buggy and you’ll need to watch it. For instance, in this demo I wasn’t able to figure a way to force the sidebars to actually be 20%. The just collapse to the width of the content inside, which is a bit arbitrary as it’s text. I also needed -moz-box-flex: 1; on the main content (60%) otherwise it would stretch to be as wide as the widest paragraph as if it had white-space: nowrap , which is just inexplicable to me.

Need more details about Flexbox?

Источник