Flexbox in Brief
FlexBox CSS3 Framework

Flexbox (CSS Flexible Box Layout Module) is relatively new layout module for CSS3. It was initially created to improve alignment, directions, and sequence of elements in a container even when their size is unknown or is changing dynamically.

This is the first full-fledged tool for page layouts. There were many attempts to develop similar solutions before. For example, Microsoft developed a tool for layout creation called Grid layout, but it didn’t gain much popularity and is used in Microsoft products. Flexbox layout has been updated several times comparing to the initial draft written in 2009. Its syntax hasn’t been changed since then. Below you can find the list of browsers and their versions supporting the latest Flexbox specification:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (WebKit version)
  • Android 4.4+
  • iOS 7.1+ (WebKit version)

As you can see, Flexbox is supported only by the latest browser versions at the moment.

So what is Flexbox and what does it feature?

Flex layout consists of a parent container called flex container and its child elements – flex items. The main feature of a flex container is its ability to change width and height of its child items to fill the available screen space on various resolutions in the best way. In most cases, it is done to support all types of displays and screen sizes. Flex container stretches its elements to fill the free space or shrinks them to avoid overflowing. The most important thing is that Flexbox layout doesn’t depend upon block directions (vertical or horizontal).

Flexbox Container and Items

Many designers and developers find Flexbox layout very easy-to-use because the positioning of elements occurs in a simpler way. As a result, you can create more complex layouts with less code, which in its turn makes the development easier. Flexbox layout algorithm is based on directions (unlike block or inline layouts which are based on verticals and horizontals). Flexbox layout is designed for smaller components of an application or small-scale layouts.

Flexbox is an effective and flexible method to manage all types of layouts. Thanks to this method there is practically no time delay between right and wrong rendering of your layout. When using JavaScript-based solutions the system spends some time to load the document, to load appropriate JS files and then to load images (if there are some) in blocks. Flexbox solution works immediately while JavaScript solutions require seconds. But even in this case JavaScript perfectly suits for those who use older browser versions that are not supported by Flexbox.

Latest Articles

February 23, 2024
Beyond the Hype: The Pragmatic Integration of Sora and ElevenLabs in Gaming

Enthusiasts have introduced a remarkable feature that combines Sora’s video-generating capabilities with ElevenLabs’ neural network for sound generation. The result? A mesmerizing fusion of professional 3D locations and lifelike sounds that promises to usher in an era of unparalleled creativity for game developers. How It Works In the context of game development, it should have looked like this: Capture Video with Sora: People start by capturing video content using Sora, a platform known for its advanced video generation capabilities. Luma Neuron Transformation: The captured video is then passed through the Luma neuron. This neural network works its magic, transforming the ordinary footage into a spectacular 3D location with professional finesse. Unity Integration: The transformed video is seamlessly imported into Unity, a widely-used game development engine. Unity’s versatility allows for the integration of the 3D video locations, creating an immersive visual experience that goes beyond the boundaries of traditional content creation. Voilà! The result is nothing short of extraordinary – a unique 3D location ready to captivate audiences and elevate the standards of digital content. A Harmonious Blend of Sights and Sounds But the innovation doesn’t stop there. Thanks to ElevenLabs and its state-of-the-art neural network for sound generation, users can now pair the visually stunning 3D locations with sounds that are virtually indistinguishable from reality. By simply describing the desired sound, the neural network works its magic to create a bespoke audio experience. This perfect synergy between Sora’s visual prowess and ElevenLabs’ sonic wizardry opens up a realm of possibilities for creators, allowing them to craft content that not only looks stunning but sounds authentic and immersive. OpenAI’s Sora & ElevenLabs: How Will They Impact Game Development? The emergence of tools like OpenAI’s Sora and ElevenLabs sparks discussions about their potential impact on the industry. Amidst the ongoing buzz about AI revolutionizing various fields, game developers find themselves at the forefront of this technological wave. However, the reality may not be as revolutionary as some might suggest. Concerns Amidst Excitement: Unraveling the Real Impact of AI Tools in Game Development Today’s AI discussions often echo the same sentiments: fears of job displacement and the idea that traditional roles within game development might become obsolete. Yet, for those entrenched in the day-to-day grind of creating games, the introduction of new tools is seen through a more pragmatic lens. For game developers, the process is straightforward – a new tool is introduced, tested, evaluated, and eventually integrated into the standard development pipeline. AI, including platforms like Sora and ElevenLabs, is perceived as just another tool in the toolkit, akin to game engines, version control systems, or video editing software. Navigating the Practical Integration of AI in Game Development The impact on game development, in practical terms, seems to be more about efficiency and expanded possibilities than a complete overhaul of the industry. Developers anticipate that AI will become part of the routine, allowing for more ambitious and intricate game designs. This shift could potentially lead to larger and more complex game projects, offering creators the time and resources to delve into more intricate aspects of game development. However, there’s a sense of weariness among developers regarding the constant discussion and hype surrounding AI. The sentiment is clear – rather than endlessly discussing the potential far-reaching impacts of AI, developers prefer practical engagement: testing, learning, integrating, and sharing insights on how these tools can be effectively utilized in the real world. OpenAI — for all its superlatives — acknowledges the model isn’t perfect. It writes: “[Sora] may struggle with accurately simulating the physics of a complex scene, and may not understand specific instances of cause and effect. For example, a person might take a bite out of a cookie, but afterward, the cookie may not have a bite mark. The model may also confuse spatial details of a prompt, for example, mixing up left and right, and may struggle with precise descriptions of events that take place over time, like following a specific camera trajectory.” So, AI can’t fully create games and its impact might be limited. While it could serve as a useful tool for quickly visualizing ideas and conveying them to a team, the core aspects of game development still require human ingenuity and creativity. In essence, the introduction of AI tools like Sora and ElevenLabs is seen as a natural progression – a means to enhance efficiency and open doors to new creative possibilities. Rather than a radical transformation, game developers anticipate incorporating AI seamlessly into their workflow, ultimately leading to more expansive and captivating gaming experiences.

August 8, 2023
Tactile Training: Revolutionizing Hazardous Industry Preparation with XR and Haptic Technologies

This article was written by our CEO Olga Kryvchenko and originally published on Linkedin. To get more biweekly updates about extended reality, subscribe to Olga’s XR Frontiers LinkedIn newsletter. The power of touch has long been recognized as a potent sensory modality. With the rise of Extended Reality (XR) technologies, touch, or more precisely, haptic feedback, has found its profound significance. Especially in hazardous industries, where direct training poses risks, XR combined with haptic feedback offers a revolutionary approach. Understanding Haptic Feedback At its core, haptic feedback simulates the sense of touch and movement. This tactile feedback, when incorporated in digital interfaces or XR environments, provides users with realistic sensations ranging from a gentle breeze to a jolt from a virtual electric shock. The Evolution of Haptic Devices While the rudimentary concept of haptic technology revolves around vibrations, contemporary haptic devices offer far more intricate feedback. – Glove-based Systems: Pioneering the future of touch in XR, these gloves simulate intricate textures, temperatures, and resistances. Users can virtually touch a hot surface or feel the graininess of sand. – Vest Systems: These aren’t your average vests. They’re equipped to simulate everything from the impact of a bullet to the gentle tap on the shoulder. – Treadmills and Platforms: Beyond letting users walk or run in a virtual space, these devices offer gradients, and resistances, and even simulate different terrains. – Haptic Controllers: These handheld devices can simulate weight, resistance, and more. They’re often used in XR setups where precision is required, like machinery operation or surgical training. Spotlight: Some XR Haptic Innovations 1. Manus Meta Gloves: Advanced haptic gloves that simulate intricate tactile experiences within virtual spaces, ideal for hazardous industry simulations. 2. SenseGlove: Offering unparalleled haptic feedback, this device simulates realistic touch sensations, ensuring authentic training experiences in hazardous industries. 3. Electric Haptic Vest: A revolutionary vest that provides electric haptic feedback, enabling users to feel virtual impacts, touches, and temperature changes, enhancing training realism. These innovations are setting the benchmark for immersive XR training in high-risk sectors, ensuring both safety and efficacy. Incorporating Haptics in XR Training for Dangerous Industries Haptic feedback is not just a fancy addition; it’s a necessity in industries where mistakes can be catastrophic. 1. Realistic Hazard Simulation: XR environments equipped with haptic feedback allow trainees to understand and feel dangerous situations, like the rumble of an impending mine collapse or the heat from an electrical malfunction. 2. Skill Refinement: Fine motor skills can be honed in a virtual space. Imagine a trainee learning to operate a chainsaw; with haptic feedback, they can feel the tug, the resistance, and even the vibration, all without the real danger. 3. Emergency Protocols: Virtual emergencies can prepare employees for real-world crises. These drills aren’t just visual or auditory; haptic feedback ensures they are physically intuitive. Looking Ahead: The Future of Haptic XR Training The fusion of haptic devices and XR promises a future where training for even the most hazardous jobs is thorough, intuitive, and above all, safe. As the fidelity of haptic feedback continues to improve, the line between virtual training and real-world operation will further blur, leading to a workforce that’s adept and prepared for any challenges. In an era dominated by technological advancements, haptic feedback stands out as a game-changer for XR training in dangerous industries. It’s not just about seeing or hearing; it’s about feeling, and that tactile element ensures that trainees are not only knowledgeable but are also instinctively prepared for real-world scenarios. Image: Freepik

July 24, 2023
Virtual Tours of National Parks. Discovering Nature’s Beauty through AR and VR

In this article, we will explore the impact of augmented and virtual reality on national parks, specifically how they are changing our experience of visiting natural landscapes. We focus on free virtual tours that allow us to see the beauty of national parks without leaving home. We will also reveal the main advantages of augmented reality, which enrich the visiting of real parks with the help of digital content with interesting information. In particular, we will share our experience of creating tourist VR excursions using the example of the Carpathian Mountains Virtual Tour and Medieval Fortress Virtual Journey. We will also explore other famous AR/VR use cases, e.g., the State Parks of California, giving us a unique perspective on our national parks’ historical and ecological significance. Discovering Benefits of AR and VR in National Parks Virtual and augmented reality offer such benefits to national parks as Getting informative content on the spot. When visiting parks and other historical places, visitors usually don’t know about this or that type of plant or even in which part of the park they are. With the help of an AR application, a tourist can simply point the screen at a particular plant and get additional information about it. Read also: The Ways AR Redefines Modern Tourism  Speaking about orientation in place, AR navigation will come in handy here, which guides the tourist in the right direction with the help of digital pointers. Read also: From Outdoors to Indoors: AR Navigation as Game-Changer Visiting places that aren’t accessible for you. During the COVID-19 pandemic and home isolation, virtual tours of museums or national parks were one of the popular alternatives to visiting real tourist locations. Even though the pandemic began to gradually fade away, virtual tours continue to be relevant. By visiting free tours on museums or park websites, an Internet user saves money on the ticket, car fuel, and transportation. Especially when a person does not always have an opportunity to get to the place where, perhaps, he would like to go. “The advantage is that you can go somewhere and experience the same feelings without leaving your home. Virtual guides have musical accompaniment, the effect of presence thus allows you to immerse yourself in the environment. This is all about VR. Plus, not all of us can go to Papua New Guinea or somewhere else to look at bamboo, baobabs, etc. Or go on safari. Therefore, these are opportunities to visit somewhere without spending additional funds,” said Oleksandr Ivanov, project manager of Qualium Systems. Drawing attention to ecology, rare plants and animals. As you know, there are more than 35,000 species of endangered plants and animals in the world, 99% of which are endangered due to human activities. With virtual and augmented reality for parks that are the home for these species of animals, it becomes possible to tell about these endangered species to a wider audience. As of July 2023, there are almost 7 billion people in the world who have smartphones, which is more than 86% of the entire population of the planet.  Qualium System’s Virtual Tours of National Parks Qualium Systems has great experience in developing VR excursions. Carpathian Mountains Virtual Tour is an application for Meta Quest, created as part of The World Of Carpathian Rosettes — Activities For Preserving The Cultural Uniqueness Of The Carpathians project by the Euroregion Carpathians — Ukraine association with the financial support of the European Union. The main goal of this program is to preserve the cultural uniqueness of the Ukrainian Carpathians. The main challenge in the development of this virtual tour was to introduce more than 260 photo and video materials into the program while providing the VR headset users with such an experience as if they were visiting a real museum. In this application, a tourist can explore virtual settlements in the Carpathians, both with the effect of presence in these settlements and from a bird’s eye view. There is also the option of a “bicycle trip” available. A tourist can “ride” along the Franko route, which is a path in the forest, famous Ukrainian poet Ivan Franko liked to travel. Also, our developers are working on another virtual tour of the medieval fortress in the Ukrainian town of Tustan. Unlike the previous tour, a VR headset user will not only be able to see the digital environment with exhibits but also interact with them. “With the help of VR, you can not only be there, in that museum, but also take the artifacts, examine, bring them up to your forehead. You could see everything down to every crack,” said Oleksandr Ivanov, project manager of Qualium Systems. Unveiling Diverse Use Cases of AR and VR in National Parks Our company pays attention to virtual tours and giving people the opportunity to see places that are inaccessible to them due to various circumstances. We constantly monitor the latest trends in the modern IT industry, and there are other famous examples that will be mentioned later. Virtual Reality Adventures in California State Parks The California Department of Parks and Recreation has introduced virtual and augmented reality tours for 9 parks located in the state of California. In the Virtual Adventurer mobile app, tourists get a guided tour that tells the story of each of the parks, including Colonel Allensworth State Historic Park, Montana de Oro State Park, Old Town San Diego Historic Park, and others. Moreover, futuristic holograms and 3D reconstructions are also involved. “The app also supports and enhances the department’s Reexamining Our Past Initiative by developing content for parks that tells a more complete, accurate, and inclusive history of people and places,” said California State Parks Director Armando Quintero.  Great Barrier Reef’s Virtual Realms As mentioned above, virtual excursions allow gadget users to get to places they would be unlikely to get to in real life. The same is true for the underwater attractions. Not every tourist wants to spend their time and money not only to reach, for example,…



Let's discuss your ideas

Contact us