How to calculate width of container which contain flex-shrink

flexBasis * (1 + shrinkFactor / sumScaledShrinkFactors * remainingFreeSpace)

Comments

Post a Comment

Popular posts from this blog

Logout Git on MacOS

Image
Managing Remotes  / Updating credentials from the OSX Keychain Updating credentials from the OSX Keychain You'll need to update your saved username and password in the  git-credential-osxkeychain helper if you change your password or username on GitHub. Updating your credentials via Keychain Access In Finder, search for the  Keychain Access  app. In Keychain Access, search for  github.com . Find the "internet password" entry for  github.com Edit or delete the entry accordingly. Deleting your credentials via the command line Through the command line, you can use the credential helper directly to erase the keychain entry. To do this, type the following command: git credential-osxkeychain erase host=github.com protocol=https [Press Return] If it's successful, nothing will print out. To test that it works, try and clone a repository from GitHub. If you are prompted for a password, the keychain entry was deleted. ...
Read more

React Tutorial for Beginners

Image
Reference link:  https://ihatetomatoes.net/react-tutorial-for-beginners/ This guide is for beginner React developers who struggle to move forward while learning React. It will give you a  very simple “ABC” path that you can follow , step by step, concept by concept, without the overwhelming feeling that you need to learn everything at once. Take your time,  digest the content of each article  in this series and  try to complete the challenge . My suggestion is that you only progress to the next step, when you are  super clear  about each of the concepts. What you will learn what is a React  component what is the difference between  stateless  and  class  components what is the  state  and what are  props what is  destructuring  in JavaScript how to render React component on the page Are you already familiar with React? Try the challenge at the end of the article. 1. Think React, t...
Read more

CSS Grid, the new CSS trend in 2018

Image
1. CSS Grid: a. Introduction: - It is two dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. - Evolution: Table -> Float -> Flexbox (one-dimension) -> CSS Grid (two dimension) -  It is currently a  W3C Candidate Recommendation  despite already being adopted by most major browsers. b. Browser support: c. Terminology: Grid Container:   The element on which   display: grid || inline-grid   is applied. It's the direct parent of all the grid items. .grid-container  {   display :  grid ; } Grid Item :  The children (e.g.  direct  descendants) of the grid container. Here the  item elements are grid items, but  sub-item  isn't . Grid Line : The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines") and ...
Read more