flex-directionįlex-direction lets you set the layout direction, just like the android:orientation attribute. The flex display value, also known as Flexbox layout, corresponds roughly with LinearLayout, and I’ll focus on it in this post. Having this information in CSS instead of the HTML/XML allows web developers to change the layout system in response to screen size or other factors. It’s used in place of the LinearLayout tag to specify the layout system. The display property sets the layout used for an element’s children. Inline text elements like span default to wrapping their content, so we don’t need to set an explicit width and height.

CSS pixels correspond 1:1 with density independent pixels, and do not necessarily correspond to the actual amount of pixels and element takes up on a device. The pixel unit ( px) is used in place of density independent pixels ( dp). The CSS width and height properties correspond to android:layout_width and android:layout_height. Let’s break down some of these properties and how they correspond to Android’s LinearLayout. Inside the rules are various declarations: pairs of properties and values. Rules have a selector to indicate which element the styles are applied to, with the # character corresponding to an ID. CSS allows you to specify blocks of rules. These files look somewhat similar to the Android XML, except that most attributes have been moved to CSS and have different names. On the web, layouts are split across two languages: HTML for declaring elements (similar to XML files in Android declaring views) and CSS for declaring styling (similar to the styles.xml file). The layout in Android may look something like this: Let’s focus on a horizontal layout, similar to a LinearLayout with the 'horizontal' orientation. Here’s some tips to learn web development using your Android knowledge.

The web platform has similar tools to layout elements using CSS, and some concepts are shared. Android developers can layout views using the simple yet flexible LinearLayout class.

Are you an Android developer looking to learn web development? I find it easier to learn a new technology stack by comparing it to a stack I’m already familiar with.

Display flex center horizontal