css - How to write this styling in latest implementation of CSS3's Flexbox -

-

i figured out how achieve style 2009 implementation of flexbox, there 2 other implementations. short-lived 2011 , part of 2012 syntax , current , final syntax.

how can write code in current , final implementation?

if can 2011 implementation, great!

i'm looking vendor-prefixes.

display:-moz-box; display:-webkit-box; display:box; -moz-box-align:center; -webkit-box-align:center; box-align:center; -moz-box-orient:horizontal; -webkit-box-orient:horizontal; box-orient:horizontal; -moz-box-pack:center; -webkit-box-pack:center; box-pack:center;

the complete set of properties this:

.foo {   display: -webkit-box;   display: -moz-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;    -webkit-box-pack: center;   -moz-box-pack: center;   -ms-flex-pack: center;   -webkit-justify-content: center;   justify-content: center;    -webkit-box-align: center;   -moz-box-align: center;   -ms-flex-line-pack: center;   -webkit-align-content: center;   align-content: center;    -webkit-box-orient: horizontal;   -moz-box-orient: horizontal;   -webkit-box-direction: normal;   -moz-box-direction: normal;   -webkit-flex-direction: row;   -ms-flex-direction: row;   flex-direction: row; }

note row/horizontal default direction, , isn't necessary add unless you're overriding previous column/vertical declaration elsewhere.

setting flex container inline follows same naming conventions other inline properties (eg. inline-block, inline-table, etc.):

.foo {   display: -webkit-inline-box;   display: -moz-inline-box;   display: -ms-inline-flexbox;   display: -webkit-inline-flex;   display: inline-flex; }

if you're doing vertical centering, firefox under 2009 implementation can problem because doesn't wrap properly. recommendation use different properties 2009 properties compared modern properties this:

http://codepen.io/cimmanon/pen/mxufa

li {   text-align: center;   vertical-align: middle;   display: inline-block;   display: -webkit-inline-box;   display: -moz-inline-box;   display: -ms-inline-flexbox;   display: -webkit-inline-flex;   display: inline-flex;   /* vertical centering legacy, horizontal centering modern */   -webkit-box-pack: center;   -moz-box-pack: center;   -ms-flex-pack: center;   -webkit-justify-content: center;   justify-content: center;   /* modern flexbox */   -ms-flex-align: center;   -webkit-align-items: center;   align-items: center;   /* legacy flexbox */   -webkit-box-orient: vertical;   -moz-box-orient: vertical;   -webkit-box-direction: normal;   -moz-box-direction: normal; }

Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more