FlexBox-Layout

 


container

display

Enables flex for all children.

display: flex

 

display: inline-flex

 

flex-direction

Establishes the main axis.

flex-direction: row

 

flex-direction: row-reverse

 

flex-direction: column

 

flex-direction: column-reverse

 

flex-wrap

Wraps items if they can't all be made to fit on one line.

flex-wrap: nowrap

 

flex-wrap: wrap

 

flex-wrap: wrap-reverse

 

justify-content

Attempts to distribute extra space on the main axis.

justify-content: flex-start

 

justify-content: flex-end

 

justify-content: center

 

justify-content: space-between

 

justify-content: space-around

 

justify-content: space-evenly

 

align-items

Determines how items are laid out on the cross axis.

align-items: flex-start

 

align-items: flex-end

 

align-items: center

 

align-items: baseline

 

align-items: stretch

 

align-content

Only has an effect with more than one line of content. Examples shown here use flex-wrap.

align-content: flex-start

 

align-content: flex-end

 

align-content: center

 

align-content: space-between

 

align-content: space-around

 

align-content: stretch

children

order

Allows you to explictly set the order you want each child to appear in.

order: integer

 

flex-grow

Allows you to determine how each child is allowed to grow as a part of a whole.

flex-grow: 1 (applied to all)

flex-grow (1, 2, and 3)

 

flex-basis

Defines the size of an element before remaining space is distributed.

first item 20%, second item 40%

 

flex-shrink

Allows an item to shrink if necessary. Only really useful with a set size or flex-basis.

both want to be 100% wide, 2nd item has flex-shrink: 2

 

align-self

Sets alignment for individual item. See "align-items" for options

3rd item has align-self:flex-end

Comments

Post a Comment

Popular posts from this blog

(gradle-2.13-all)-Exception in thread "main" java.lang.RuntimeException: java.io.IOException: Server returned HTTP response code: 403 for URL: http://services.gradle.org/distributions/gradle-2.13-all.zip

  Answer: There are some simple steps to fix the error. 1)  find and open  platforms\android\cordova\lib\builders\GradleBuilder.js  file with text editor. Find the line var distributionUrl = process . env [ 'CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL' ] || 'http\\://services.gradle.org/distributions/gradle-2.13-all.zip' ; then change  http  to  https  in this line as follows: var distributionUrl = process . env [ 'CORDOVA_ANDROID_GRADLE_DISTRIBUTION_URL' ] || 'https\\://services.gradle.org/distributions/gradle-2.13-all.zip' ; then save the file. 2)  Check installed jdk versions and install  jdk 1.8  if not installed. Then if the  JAVA_HOME  environment variable is anything but  1.8  open  tools->options->Tools for Apache Cordova->Environment Variable Overrides  in Visual Studio, check the  JAVA_HOME  checkbox and select the java 1.8 folder like follows: C:\Program Files\Java\jdk1...
Read more

Cordova App for Publishing to an App Store - Steps by Steps (https://docs.microsoft.com/)

Image
When you build an application for deployment to an emulator, simulator, physical device or the Cordova Simulate browser, you're building a version of the application specifically crafted for local testing of the app. The app is usually built with debug information packaged into the executable, and the app is signed with a signing key which allows it to work on your local device, but not on any device. Before you can build your application for deployment to any device through a public app store, you must first configure Visual Studio with the information it needs to complete the process of packaging and signing the application for deployment through an app store. In this article, you'll learn how to configure a project for deployment and create a deployment package for each target platform: Android iOS Windows Android Applications For Android applications, preparing your environment for publishing, and publishing the app requires that you complete the following steps: Modify App...
Read more

Top CSS Interview Questions and Answers ()

Image
Table of Contents Top CSS Interview Questions and Answers Basic CSS Interview Questions Question: What is CSS? Question: What are the different variations of CSS? Question: What are the benefits of using CSS? Question: What are the disadvantages of CSS? Question: What is meant by CSS frameworks? Question: Give a few examples of modules found in the present version of CSS. Question: What is the difference between CSS2 and...
Read more