HTML5 Tutorial 15 -webkit-box

+4 Keith C · October 13, 2014
During the tutorial it indicates that this was a feature still being developed (as such) so I am guessing it has been renamed now. The following bits don't seem to be working

body{
   width:100%;
   display:-webkit-box;
   -webkit-box-pack: center;
}
#big_wrapper{
   max-width: 1000px;
   margin: 20px 0px;
   display:-webkit-box;
   -webkit-box-orient: vertical;
   -webkit-box-flex: 1;
}



Now it could be something that I am doing but can someone confirm if this still works (in chrome)? when I save this, my page is not centering like it does in the video. 

Thanks,

Post a Reply

Replies

Oldest  Newest  Rating
0 HyJax LTD · October 18, 2014
SOLVED:

This link deals with the removal of '-webkit-' and '-ms-':

http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/dn265027(v=vs.85).aspx

It will link you to this article which gives the newer syntax. For the assignment from Bucky's tutoiral, I had to click on each one to get its correct operators.

http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx">http://msdn.microsoft.com/en-us/library/ie/hh673531(v=vs.85).aspx

Here is the {.css} as it should be to complete HTML5; crs 17:
(I found the correct syntax for reversing the box order by using the links on the MSFT page)


#mommy{
 border: 2px solid blue;
 display: flex;
 flex-direction: row-reverse;
 
 
}
#kid1{
 border: 2px solid red;
 background: green;
 padding: 20px;
 margin: 10px
 
}
#kid2{
 border: 2px solid red;
 background: red;
 padding: 20px;
 margin: 10px
}
 
#kid3{
 border: 2px solid red;
 background: yellow;
 padding: 20px;
 margin: 10px
}
#kid4{
 border: 2px solid red;
 background: orange;
 padding: 20px;
 margin: 10px
 
}

This is the standard and even crossing into device dev' standards.

Very updated.

I had difficulty with both the link you gave and W3 schools as neither is up to speed fully.... it seems that MSFT is the only ones to make sure the correct data is up to date... but then they do hold the patent for the new html5 so that makes some decent sense.
0 Shamyle Ghazali · October 13, 2014
Please help. I have the same issue. I saw someone's comment on Youtube stating that the Flexible Box Model has been fully implemented so the "webkit" is no longer being used on the newest version of Chrome. :(
0 Keith C · October 14, 2014
found this on google, haven't tried it yet 

Common changes:
display: -webkit-box -> display: -webkit-flex
-webkit-box-align: start -> -webkit-align-items: flex-start
-webkit-box-align: center -> -webkit-align-items: center
-webkit-box-pack: start -> -webkit-justify-content: flex-start
-webkit-box-pack: center -> -webkit-justify-content: center
-webkit-box-orient: vertical -> -webkit-flex-direction: column
0 Keith C · October 16, 2014
ok I got it to work after looking around abit. 

flex is replacing -webkit-box for chrome. From what I have seen, flex only works with chrome, there are other tags for other browsers which you would have to include for cross browser comparability. 

Old EntriesNew Entries
-webkit-boxflex
-webkit-box-packjustifty-content
-webkit-box-flexflex
-webkit-box-orient (horizontal/Vertical)flex-direction (row/column)



More info on flex here  
http://css-tricks.com/snippets/css/a-guide-to-flexbox/


Here is my css for lesson 16


*{
margin:0px;
padding:0px;

}
h1{
font: bold 20px Tahoma;
}
h2{
font: bold 14px Tahoma;
}

header, section, footer, aside, nav, article, hgroup{
display:block;

}
body{
width:100%;
display:flex;
justify-content: center;



}
#big_wrapper{
display:flex;
  flex-direction: column;
flex:1;
max-width: 1000px;
margin: 20px 0px;
}
#top_header{
background: yellow;
border: 3px solid black;
padding: 20px;

}
#top_menu{
border:red;
background:blue;
color: white;

}
#top_menu li{
display:inline-block;
list-style: none;
padding:5px;
font: bold 14px Tahoma;
}
#new_div{
display:flex;  
flex-direction: row;

}
#main_section{
border: 1px solid blue;
margin: 20px;
padding: 20px:

}
#aside_news{
border: 1px solid red;
width: 220px;
margin: 20px 0px;
padding: 30px;
background: #66CCCC;

}
#the_footer{
text-align: center;
padding: 20px;
border-top: 2px solid green;

}

0 HyJax LTD · October 16, 2014
I noticed that this appears to just be the standard... without using "-webkit-box".

That all browsers currently have it implemented and supported from IE to MOZ to Chrome.

I thnk the same link you just posted to had the table of browsers that use the NEW implementation.

Any one comment to this?

OFF HAND: This is some awesome stuff Bucky!!! Im picking up so quickly form just the dBase administrator I was in the USMC.  Thank you. 
0 HyJax LTD · October 17, 2014
Here is the reference from W3Schools:

http://www.w3schools.com/cssref/default.asp#flexible

As well, I copied and pasted the code in your above example and got the screenshot results for IE11.
0 HyJax LTD · October 18, 2014
Forgot this...

/images/forum/upload/2014-10-18/a578e5bcb2937601eb86a27eb3812adb.png
  • 1

HTML / CSS / Web Design

120,725 followers
About

Discuss, share, ask, learn and teach HTML5 and CSS3.

Links
Moderators