• 0

CSS Flexbox


Question

Seahorsepip

I have avoided flexbox in css for a long time since I didn't see any practical use for it. Now I ran into some issues which required flexbox but I had no experience of using flexbox in css whatsoever :p

So I found a website that explained me flexbox in a few min: http://flexboxfroggy.com/. It's a css game with frogs xD

 

Anyway here's a more detailed explanation of flexbox: http://tympanus.net/codrops/css_reference/flexbox/

 

And flexbox is kinda handy for sticky footer with a variable height as example.

Also the menubar of apple.com is just a few lines of code now: https://jsfiddle.net/wk054b9n/

 

I started using flexbox to improve small details of layouts,tThe layout itself still shows properly when flexbox is not supported in certain browsers.

Link to post
Share on other sites

16 answers to this question

Recommended Posts

  • 0
pqt

Flexbox has a large amount of browser support which is why the Bootstrap framework (v4) is moving in favour of using it.

 

I personally use it as much as possible, it's very handy because of how robust you can make it and it responds to auto-sizing similar to tables.

Link to post
Share on other sites
  • 0
Seahorsepip
13 minutes ago, Mur said:

Flexbox has a large amount of browser support which is why the Bootstrap framework (v4) is moving in favour of using it.

 

I personally use it as much as possible, it's very handy because of how robust you can make it and it responds to auto-sizing similar to tables.

I try to use flexbox myself too lately but I make sure that the layout can partially fallback on floats when flexbox isn't supported.

Link to post
Share on other sites
  • 0
pqt
1 hour ago, Seahorsepip said:

I try to use flexbox myself too lately but I make sure that the layout can partially fallback on floats when flexbox isn't supported.

https://github.com/ridjohansen/css_browser_selector Highly recommend this if you don't use a similar solution already.

Link to post
Share on other sites
  • 0
Seahorsepip
8 hours ago, Mur said:

https://github.com/ridjohansen/css_browser_selector Highly recommend this if you don't use a similar solution already.

I'm actually not using anything for fallbacks. The flexbox layout will overide the float layout when flexbox is supported without any need to disable the floating css first ^^

Link to post
Share on other sites
  • 0
pqt
4 hours ago, Seahorsepip said:

I'm actually not using anything for fallbacks. The flexbox layout will overide the float layout when flexbox is supported without any need to disable the floating css first ^^

That's fair, what about width specifications or vertical alignment parameters, I'm curious; how do you handle fallbacks on that?

Link to post
Share on other sites
  • 0
MikeChipshop

Welcome to the Flexbox family! :D

 

Give it a week and you'll never know how you survived without it.

This game http://flexboxfroggy.com/ is awesome for getting to grips with it.

 

Enjoy 

Link to post
Share on other sites
  • 0
Seahorsepip
6 hours ago, MikeChipshop said:

Welcome to the Flexbox family! :D

 

Give it a week and you'll never know how you survived without it.

This game http://flexboxfroggy.com/ is awesome for getting to grips with it.

 

Enjoy 

I posted that game already :p

  • Like 1
Link to post
Share on other sites
  • 0
Seahorsepip
8 hours ago, Mur said:

That's fair, what about width specifications or vertical alignment parameters, I'm curious; how do you handle fallbacks on that?

I tend to use inline-block with vertical-align a lot for centering popups and such: https://jsfiddle.net/qg4ob9k5/

 

Here's the same code after I added flexbox: https://jsfiddle.net/ktfqcpat/

The inline-block code will make the layout work when flexbox isn't supported.

Link to post
Share on other sites
  • 0
MikeChipshop
37 minutes ago, Seahorsepip said:

I posted that game already :p

Oops! It was early... :p

Link to post
Share on other sites
  • 0
Seahorsepip

Here's the code I use for popups myself: https://jsfiddle.net/qerzeff0/

 

It supports a ok and no button, a title and html content.

 

The html content can be html inputs which will be returned after the popup is closed.

The popup function will also return true or false based on which button is clicked and you can close the popup manually with close(); (Usefull for progress bar popups).

 

It will also disable the scrolling behind the popup properly so that the popup itself can be scrolled when it's height is larger then the viewport.

 

Edit: seems text-align: initial doesn't work in IE..... added a css hack for IE :/

 

The popup code can ofcourse be improved if needed, the ok, and no variable could be replaced with an array that has the text, return value and class for each button.

  • Like 1
Link to post
Share on other sites
  • 0
Seahorsepip

Since I'm bored I improved my popup code to support an array of buttons :shiftyninja:.

 

Edit: Improved the code to also support buttons that don't close the popup.

Edit 2: Add addClass function to add a class to the popup_wrapper and got rid of the progress function:

example.open().progress(function(r, f) {
});

Becomes

example.open(function(r, f) {
});

https://jsfiddle.net/4fvryktb/

 

Can't think of anything else to improve it :p Gonna keep this bookmarked for personal use in future projects.

  • Like 1
Link to post
Share on other sites
  • 0
The_Decryptor

It's got rather bad support currently, but have a look at the <dialog> element, there's a few polyfills that implement most of the functionality across other browsers.

Link to post
Share on other sites
  • 0
Seahorsepip
9 hours ago, The_Decryptor said:

It's got rather bad support currently, but have a look at the <dialog> element, there's a few polyfills that implement most of the functionality across other browsers.

Hmm browser support by default is depressing...

Only problem is the fact that the dialog element has no wrapper element or anything to make a background with :/

 

Edit: Seems they have a :backdrop psuedo element for that. I might look into the dialog element in the future when it's more supported. Maybe there will be dialogfroggy.com site by then :p

Link to post
Share on other sites
  • 0
Seahorsepip

Added an option to make the popup draggable: https://jsfiddle.net/8463fqeq/

 

Fixed a bug that made the page unscrollable even before the open() function was called on the popup object.

 

https://jsfiddle.net/ukqcm9x7/

 

Edit: added dragging code for touchscreens:

 

https://jsfiddle.net/mm7b7t5t/

Link to post
Share on other sites
  • 0
Seahorsepip

Probably taking this popup code a bit too far :p

 

Added more options(toggle overlay, keep popup inside the window on resize, unbind events after closing the popup etc): https://jsfiddle.net/1fhce3wd/

 

Will post a new thread when I'm finished and made it into proper code ^^

Link to post
Share on other sites
  • 0
Seahorsepip
5 hours ago, Muhammad adnan said:


let all the flexible items be the same length,regardless of its content:

 

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
    width: 220px;
    height: 300px;
    border: 1px solid black;
    display: -webkit-flex; /* Safari */
    display: flex;
}

#main div {
    -webkit-flex: 1;  /* Safari 6.1+ */
    -ms-flex: 1;  /* IE 10 */    
    flex: 1;
}
</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;">RED</div>
  <div style="background-color:lightblue;">BLUE</div>  
  <div style="background-color:lightgreen;">Green div with more content.</div>
</div>

<p><b>Note:</b> Internet Explorer 9 and earlier versions do not support the flex property.</p>

<p><b>Note:</b> Internet Explorer 10 supports an alternative, the -ms-flex property. IE11 and newer versions fully support the flex property (do not need the -ms- prefix).</p>

<p><b>Note:</b> Safari 6.1 (and newer) supports an alternative, the -webkit-flex property.</p>

</body>
</html>

Please seperate html content and css in seperate code tags for readability.

  • Like 1
Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Pay What You Want for this Learn to Web Design Bundle
      by Steven Parker

      Today's highlighted offer comes via our Online Courses section of the Neowin Deals store, where for only a limited time you can Pay What You Want for the Learn to Web Design Bundle. Break into the lucrative world of professional web design with up to 75 hours of content.



      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked course:

      Design a Website From Scratch: HTML, CSS, Responsive Design
      Create Responsive Websites Using the Foundational Blocks of Web Design

      and unlock the following courses with a minimum of the average price:

      Learn Photoshop, Web Design & Profitable Freelancing 2017
      Discover the Photoshop Workflow & Establish a Lucrative Freelancing Career

      Adobe Photoshop CC: Your Complete Beginner's Guide
      The World's Most Popular Photo Editing Software Taught to You From A to Z

      Responsive Web Design: Made Easy
      Learn the Basics of HTML5 & CSS3 & Start Designing Dynamic Websites

      The Complete Bootstrap Masterclass Course: Build 4 Projects
      Discover the Scalability of Bootstrap by Building 4 Real, Responsive Projects

      jQuery UI Ultimate: Design Amazing Interfaces Using jQuery UI
      Implement A Wide Range of Interactivity Into Websites & Make Your Resume Stand Out

      UI Design in Photoshop: Start Designing Web & Mobile Apps
      Optimize Adobe Photoshop for Web & Mobile Design

      Building Websites: Learn Bootstrap for Rapid Web Development
      Enhance Your Development Workflow by Learning this Efficient Scaling Framework

      Web Design: Make a Single Page Website Carousel Controls
      Build a Completely Dynamic Webpage as the First Step Towards Web Design Mastery

      What's the benefit?
      The bundle represents an overall retail value of $1,048. But you can Pay What You Want for the unlocked courses (as little as $1). Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for the Learn to Web Design Bundle
      See other Pay What You Want deals. This is a time-limited deal that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Giveaways: Home Arcade Polycade | Complete Home Gym | $10K in Crypto currency Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for the 20-Course app Programming Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for The 20-Course Programming Bundle. From game development to making responsive apps, this 20-course collection has everything you need to start coding.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the following course:

      Image Processing with Python: Build an Instagram-Style Filter
      Develop a Photo Filter Editor from Scratch & Master Your Understanding of Matrices, Color Models & More

      Beat the average price to get the following courses as well:

      Azure Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to Microsoft Azure & Make Them Accessible Online

      MongoDB for Beginners
      Get Acquainted with MongoDB & Discover How to Manage Data Operations Like a Pro

      Node.js For Beginners: Create Server-Side Apps with JavaScript
      Learn How to Build Fast Web Applications with Node.js, the Server-Side Solution for JavaScript

      Intro to Next.js
      Get started with the Minimalist Framework That Allows You to Build Static, Server-Rendered React Apps

      Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps

      Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5 & Advanced JavaScript Concepts by Building Three Projects

      JavaScript Programming: Learn by Making a Mobile Game
      Dive into JavaScript's Core Concepts By Building a Game From Scratch

      HTML & CSS Course
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page

      AWS Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to AWS & Make Them Accessible Online

      The Complete HTML5 Mobile Game Development Course
      Use the Phaser HTML5 Framework & JavaScript Technologies to Build Cross-Platform Games

      Master Unity Game Development: Beginner's Bootcamp
      Learn Unity & C# by Creating a 3D Multi-Level Platformer Game

      Master Unity Mobile Game Development
      Learn the Quirks of Mobile Game Development with Unity

      Unity Game Development: Build a First-Person Shooter
      Master Unity by Building Your Own Version of Doom or Call of Duty

      Data Manipulation with Pandas
      Learn How to Read & Manipulate Data + Prepare It for Analysis Using the Pandas Library

      The Complete Python Data Visualization Course
      Master the Major Plotting Libraries Matplotlib, Seaborn & Bokeh + Use Them to Create Beautiful Plots

      Learn Python 3 by Making a Game
      Get up to Speed with Python by Creating Your Very Own Game

      Build a Tower Defense Game with Phaser 3
      Master the Skills Needed to Build a Complete Tower Defense Game Using Phaser 3

      Numpy Matrices & Vectors
      Take Advantage of the Numpy Library & Build Powerful + Functional Arrays and Matrices

      The Complete Responsive Web Design Course
      Learn How to Build Professional Websites That Work Across Different Devices & Platforms

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase Here's the deal:
      The bundle represents an overall retail value of $3,732 But you can Pay What You Want for the unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Pay What You Want for The 20-Course Programming Bundle
      See other Pay What You Want deals. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Home Gym Giveaway | Bitcoin (BTC) Investment Giveaway Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By zikalify
      Try out freeCodeCamp if you want to get into programming
      by Paul Hill



      Whether you’ve seen some of the latest robot or AI Sci-Fi films or you’re simply thinking about a change of career and want to learn to code, freeCodeCamp is an excellent resource to begin your journey into the world of programming, it's available to everyone around the world and at no cost.

      freeCodeCamp, which is a little over six years old, boasts more than 40,000 graduates who have gone on to get jobs at big tech firms including Microsoft, Apple, Google, Amazon, and Spotify. It offers a variety of courses which you work through where you'll learn all the relevant information before completing several projects which demonstrate you’ve learned the content - upon completion of the projects, you get a certificate for the course which appears on your public profile.

      This approach to teaching programming is great because you end up with five projects per course which can be shown off to prospective employers, who will most likely want to know what you’ve worked on. The courses that are available at the time of writing include:

      Responsive Web Design JavaScript Algorithms and Data Structures Front End Development Libraries Data Visualization APIs and Microservices Quality Assurance Scientific Computing with Python Data Analysis with Python Information Security Machine Learning with Python It’s recommended that you work through the material in order but nobody is stopping you from jumping to other sections first. In addition to the courses, there’s also a section called Coding Interview Prep which contains hundreds of coding challenges that “test your knowledge of algorithms, data structures, and mathematics” as well as additional projects which you can add to your portfolio.

      To help you along your coding journey, freeCodeCamp features a very active forum where you can ask questions if you get stuck on any of the tasks or just want to ask about any coding concepts. Once you are thinking about searching for jobs that utilise your new skills, the Career Advice section of the forums can provide you with invaluable information about landing a job.

      A few other niceties about the service include that content is available in English, Spanish, and Chinese, there are regular blog posts related to programming from contributors and they’ve created a radio player that loops music “designed for coding” 24/7.

      To begin learning, you do not need to create an account but making one is highly recommended so that you can save your progress, earn certificates, and have a public profile page to show off. To learn more about the service, reading the FAQs section is highly recommended.

    • By News Staff
      Pay What You Want for this Complete Ruby on Rails Master Class Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for this Complete Ruby on Rails Master Class Bundle. Become a professional developer with 200+ hours of instruction in one of today's premier frameworks.



      How does it work?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the unlocked item:

      Comprehensive Ruby on Rails
      Start Building Powerful Apps with This Robust Framework

      Or beat the average price to get the following items:

      Professional Rails Code Along
      Develop a Real World Rails Project Through a Step-by-Step Process

      Angular & Rails 5 Bootcamp
      Learn How to Build a Real World Angular 2 App That Utilizes Ruby on Rails

      HTML/CSS Bootcamp
      Learn HTML, CSS, Flexbox, & CSS Grid

      Ruby on Rails Foundations
      Learn the Ruby on Rails Web Framework, from Basic Principles to Advanced Coding Techniques

      Vim for Ruby Developers
      Automate Your Coding Workflow & Use a Text Editor Like a Pro Ruby Developer

      Introduction to TypeScript Development
      Build Angular 2 Web & Mobile Applications with the TypeScript Programming Language

      Comprehensive Algorithms
      Explore Algorithm Analysis & Development

      Comprehensive JavaScript Programming
      Get Up to Speed with the Internet's Most Common Programming Language

      Freelance Bootcamp: The Comprehensive Guide to Freelancing
      Build a Profitable Freelance Programming Business Completely from Scratch

      Dissecting Ruby on Rails 5: Become a Professional Developer
      Learn What it Takes to Become a Professional Rails Developer

      Here's the deal:
      The bundle represents an overall retail value of $867 But you can Pay What You Want for the unlocked course (as little as $1) Beat the average price and you'll take home the entire bundle. Beat the Leader's price and get entered into the epic giveaway. Get the Complete Ruby on Rails Master Class Bundle
      See other Pay What You Want deals. This is a time-limited offer, ending soon.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Home Gym Giveaway | Ultimate Gaming Giveaway (feat. PlayStation 5 & Xbox Series X) Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By News Staff
      Pay What You Want for this 20-Course Programming Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for the The 20-Course Programming Bundle. From game development to making responsive apps, this 20-course collection has everything you need to start coding.



      What's the deal?
      With the Pay What You Want bundles, you can get something incredible for as little as you want to pay. And if you beat the average price, you’ll receive the fully upgraded bundle! Included in this Pay What You Want deal, are the following courses:

      Pay What You Want (as little as $1) for the following course:

      Image Processing with Python: Build an Instagram-Style Filter
      Develop a Photo Filter Editor from Scratch & Master Your Understanding of Matrices, Color Models & More

      Beat the average price to get the following courses as well:

      Azure Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to Microsoft Azure & Make Them Accessible Online

      MongoDB for Beginners
      Get Acquainted with MongoDB & Discover How to Manage Data Operations Like a Pro

      Node.js For Beginners: Create Server-Side Apps with JavaScript
      Learn How to Build Fast Web Applications with Node.js, the Server-Side Solution for JavaScript

      Intro to Next.js
      Get started with the Minimalist Framework That Allows You to Build Static, Server-Rendered React Apps

      Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps

      Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5 & Advanced JavaScript Concepts by Building Three Projects

      JavaScript Programming: Learn by Making a Mobile Game
      Dive into JavaScript's Core Concepts By Building a Game From Scratch

      HTML & CSS Course
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page

      AWS Deployment for Node.js Applications
      Discover How to Deploy Your Node.js Apps to AWS & Make Them Accessible Online

      The Complete HTML5 Mobile Game Development Course
      Use the Phaser HTML5 Framework & JavaScript Technologies to Build Cross-Platform Games

      Master Unity Game Development: Beginner's Bootcamp
      Learn Unity & C# by Creating a 3D Multi-Level Platformer Game

      Master Unity Mobile Game Development
      Learn the Quirks of Mobile Game Development with Unity

      Unity Game Development: Build a First-Person Shooter
      Master Unity by Building Your Own Version of Doom or Call of Duty

      Data Manipulation with Pandas
      Learn How to Read & Manipulate Data + Prepare It for Analysis Using the Pandas Library

      The Complete Python Data Visualization Course
      Master the Major Plotting Libraries Matplotlib, Seaborn & Bokeh + Use Them to Create Beautiful Plots

      Learn Python 3 by Making a Game
      Get up to Speed with Python by Creating Your Very Own Game

      Build a Tower Defense Game with Phaser 3
      Master the Skills Needed to Build a Complete Tower Defense Game Using Phaser 3

      Numpy Matrices & Vectors
      Take Advantage of the Numpy Library & Build Powerful + Functional Arrays and Matrices

      The Complete Responsive Web Design Course
      Learn How to Build Professional Websites That Work Across Different Devices & Platforms

      Good to know
      Certification of completion included Length of time users can access this course: lifetime Redemption deadline: redeem your code within 30 days of purchase Here's the deal:
      The bundle represents an overall retail value of $3,732 But you can Pay What You Want for the unlocked courses (as little as $1) Beat the average price and you'll take home the entire bundle. Qualify for the giveaway!
      Beat the Leader's price and get entered into the epic giveaway—plus get featured on the leaderboard!

      >> Pay What You Want for The 20-Course Programming Bundle <<
      See other Pay What You Want deals. This is a time-limited offer that ends soon.
      Get $1 credit for every $25 spent · Give $10, Get $10 · 10% off for first-time buyers.

      Not for you?
      That's OK, there are other deals on offer you can check out here.



      Home Gym Giveaway | Ultimate Gaming Giveaway (feat. PlayStation 5 & Xbox Series X) Ivacy VPN - 5 year subscription for just $1 per month NordVPN - 2 year subscription at up to 68% off Private Internet Access VPN - subscriptions at up to 71% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Neowin Store for our preferred partners. Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Disable Sponsored posts · Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.