What are the main benefits of using flex style in CSS?

Question

As I read about new changes in HTML and CSS, I learned about flex styles such as -webkit-flex .

Which is the only advantage of using flex instead of the usual div method with multimedia tags for a responsive style.

I have not seen any site using flex for responsiveness.

Answer 1

I have not seen any site using flex for responsiveness.

Source from CanIUse

Candidate’s CSS Flexible Boxes Layout Specification Step recommendations, not all browsers have implemented it. WebKit implementation must have -webkit prefix; Internet Explorer implements an old version of the specification, a prefix; Opera 12.10 implements the latest version of the specification, has no prefixes. See compatibility table for each property for current status compatibility.

Flex box

The new flexbox layout mode allows you to redefine how we make layouts in CSS. Unfortunately, the specification has changed a lot recently, so it is implemented differently in different browsers. There are many legacy flexbox resources.

Flexbox has many exciting features like it

• can be laid out in any direction of the flow (left, right, down or up)!
• can have a display order or reorder at the style level (that is, the visual order can be independent of the order of the source and speech)
• can be built linearly along one (main) axis or wrapped in several lines along the secondary (transverse) axis
• they can “bend” their sizes to respond to available space.
• can be aligned relative to their container or each other
• can be dynamically compensated or unmanned along the main axis while maintaining the size of the container.

The problem with the old box model

Consider the following code for use with a three-column layout.

 .col { width: 33.33%; padding: 0 5%; } 

This will not give you columns that are 33.33% wide , it will create columns that are 43.33% wide. This will break the layout of the three columns, since the total width of the columns exceeds 100%. In other words, the append is added to the existing width. Thus, its gasket + width.

If you need to create a three-column layout, you usually use a float (or inline block), and then calculate the necessary widths, paddings and margins so that they fit into the parent container. This is an unjustified work that could have been avoided, even if it had already become second nature.

I found a good tutorial for the current state of flexbox implementation here .

Known Issues from CanIUse

• Firefox does not support percent widths. See the error .
• The default values ​​for IE10 and IE11 for flex are 0 0 auto ( see here ), not 0 1 auto , according to the project specification, as of September 2013.
• Firefox does not support flex-wrap, align-content properties. See error
• In IE10 and IE11, containers with display: flex and flex-direction: column will not correctly calculate the sizes of their flexible children if the container has min-height but does not have an explicit height property. See the error .
• In Chrome and Safari, the height (non flex) of children is not recognized as a percentage. However, Firefox and IE recognize and scale children based on percentage heights.

References

• Project editor

• Immerse yourself in Flexbox

• Flexbox Tutorial 2013 (Updated 2013)

• Flexbox Guide

Answer 2

What is flexbox?

Flexbox as specified in the W3C Specification :

The specification describes a CSS window model optimized for user interface design. In the model of the flexible layout, the children of the flexible container can be laid out in any direction and can “bend” their sizes, either increasing to fill the unused space, or reduce to avoid overflowing the parent. Both horizontal and vertical alignment of children can be easily manipulated. The nesting of these boxes (horizontally inside the vertical or vertically inside the horizontal) can be used to build layouts in two dimensions.

It is worth noting that flexbox is not only one property, but also a whole module with many properties that affect the flow and positioning of elements inside the parent element (usually a kind of wrapper div), once it is defined as a flexible container. This is done using display: flex .

Resources on flexbox:

• CSS Tricks Guide for flexbox

• MDN Guide

• Opera flexbox basics article

Benefits

Flebox allows us to have more control over the aligment and behavior of box / divs / page elements when changing screen sizes or device orientation.

Without flexbox methods to achieve a flexible layout:

• floats - basically hack since its initial use allows you to allow parts of the content to change position without removing them from the document flow (i.e. positioning images around the text). They are mainly used for horizontal stacking, often in combination with media queries and clearfix hack.

• relative units (% or em) for calibration - in most cases work well for horizontal layout, but have no or less control for vertical alignment.

• media queries - used in combination with the top MQ methods make the main RWD element, but in more complex cases, as a rule, they become messy, since each request must contain all the properties that affect the size and position of the element we want to adjust (width , height, padding, margins, display, etc.).

• javascript - dynamically changing properties of elements based on other variables. Also, a hacker solution, often not very clean, is taxed on page size and performance, and also depends on JS.

Flexbox, in particular, is a “shorthand” combination of the above methods, but it also has three distinct advantages :

• setting flexible width / height of elements depending on available space
• both vertical and horizontal centering without any hacks and workarounds
• Change the order of elements within the layout without affecting the layout and structure of the document (using either the order property or flex-flow ).

For more specific examples, please check the links listed at the end of this answer.

Browser Syntax and Support

Over time, where significant changes have occurred with respect to the flexbox syntax for different browsers, which are well described in this article , but with widespread use of prefixes such as autoprefixer , we can simply adhere to the latest standard syntax and automate the prefix (autoprefixer offers a definition option of how far back we want to go regarding browser support).

However, flexbox is supported in all major browsers except IE 9 and below. Opera supports flexbox from version 12.1 and does not offer support in Opera Mini (what a shock). For many existing sites, using flexbox probably means a lot of work for limited benefits, but with less usage of IE 8 and 9, flexbox will grow.

When and how should I use?

As indicated in this article, flexbox is not intended to create full page layouts (for this purpuse there is a css grid that currently works and works quite funny, only IE is supported), but for managing small individual components such as navigation and side elements.

At the moment, you can probably find support through the modernizer and make a backup for IE lte 9 or go backwards, adhering to the universal principles of work and expand them to offer the best experience in browsers that can handle it (I would recommend the latter) . As always, this will depend on the specific requirements of the project and the profile of visitors, if flexbox will be used at all or not.

Examples of using

I don't have real examples of using flexbox, but here are some links for use cases that are easily resolvable with flexbox:

• Boxes that fill the height (or more) (and Dont Squish)

• Solved by flexbox

• Centering items with flexbox

• Flexbox tricks to enhance CSS templates

• Flexbox cheatsheet

Answer 3

FlexBox's Best or Biggest Advantage is Flexibility and the fact that the browser will calculate most of the things for us with minimal and simple setup or coding.

Today, most sites use float design for design, but it's really just a hack, because swimming should just be a way to surround the image in text, like in any newspaper. But it has become so normal that we think of it as a rule. It is like web designers used tables for design; it was not to be for this.

With FlexBox, you can easily and efficiently use your Faux and “real-time” columns, you can set one (or more) fixed columns and one (or more) flexible ones without using hacks such as the overflow-float combination available the space is very good - you can change the order of elements by simply changing the number, which will be very cool and useful in combination with RWD, or even justify the content without using a lot of hacks for different scenarios ( display:inline-block , float and translate , etc. d.).

Thus, in the end, we can’t do anything new, because over the years we have found many ways to handle / hack our needs, but with FlexBox we will have a special tool> to make most of these sick methods work properly. I think a good example is how we did it in previous rounded corners with four div , and today we just use border-radius . So finally, we save time and get cleaner code.

I think (hopefully?) This year we will see a significant increase in the use of FlexBox, since the end of XP is here, and IE8 will die - and I think that users will switch to another version of Windows with IE10 / 11.

Answer 4

I would say that the main advantage of the Flexible Box Layout module is that it calculates everything for you. You do not need to calculate how much space an element with fields, filling, etc. takes up. This is done automatically.

Answer 5

Great for listing, especially on e-commerce sites or sites based on products such as bookstores, etc. Let's say you have a display area of ​​600x600 pixels for your products to be listed. Each product has a dynamic width due to the image of the product inside, horizontally or vertically. Flex arranges these fields so nicely, it does not put the corresponding boxes below and removes the remaining widths and heights of the boxes.

To support browser w3schools state

The box-flex property is supported only by Opera.

Internet Explorer 10 supports an alternative, the -ms-flex property.

Firefox supports an alternative, the -moz-box-flex property.

Safari and Chrome support an alternative, -webkit-box-flex property.

Note. Flexible blocks are not supported in Internet Explorer 9 and earlier.

Answer 6

• Standard user interface component
• Remoting (the ability to interact with web services by passing typed objects)
• Improved skinning and styling workflow (than HTML / CSS at the time)
• Effective vector graphics for data visualization (graphs, graphs, etc.)

Answer 7

I looked through a few posts, and my choice was “Using Flexbox,” from CSS-Tricks by Chris Coyier. http://css-tricks.com/using-flexbox/ This article provides detailed information on what you need to do to make Flexbox work with as many browsers as possible. In the browser support subheading, it gives us a supported list of browsers, obviously with the caveat: “If you weave it all, you can get it”:

Chrome Fire Fox Safari Opera (12.1+) IE (10+) iOS Android

If we are going to create layouts for browsers that do not support Flexbox, we need to serve them the way we are used to. Technically, this is the way we are doing now: using percentages, ems, and floats in combination with media queries to create flexible layouts that work on a variety of devices, not only the smartphones and tablets that we use today.