CSS Flexbox - a new layout method for web pages

Hi,
As you may all know, css flexbox is a new layout method for laying out your web page, and with Firefox releasing version 22 within the next few days, (should have been yesterday) it is now no longer hidden behind browser settings. Add to this the fact that all desktop browser except IE10 and Safari 5 & 6, no longer require the use of a vendor prefix, and that http://html5please.com/ simply say ’USE’, flexbox is now finally a viable layout alternative, especially for responsive layouts.
Flexbox has been available on all Android and iOS devices, (and any device using the webkit engine, e.g. new blackberry’s and Kindle Fire devices) since they were first release.
To help find problems, and provide help in using flexbox, we would be grateful if you would experiment and provide feedback in the use of flexbox for layouts.
To help you get started a video tutorial, (with files to download) and examples of layouts, (more to be added next week) and tips & tricks to help with some of the more common problems have been provided at http://flexboxlayouts.com/. This site will also be updated to provide you with a list of problems and hopefully the solutions to those problems, so that you will have a ’one stop’ reference site for using flexbox.
If you have any tips in using flexbox, or a flexbox layout that you would like added to the site, then you can use the ’Submit’ email address on the http://flexboxlayouts.com/ site.
For more info on the css flexbox specifications see -
http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/
or if you just want to know what property is supported by which browser/device -
http://flexboxlayouts.com/pdfs/flexbox%20browser%20Properties%20.pdf
Note to regular contributors & moderators:
As I only have time to visit and help in the forum for a few hours per week, should you find any flexbox problems unanswered then please let me know via email.
PZ

Hi Al
Yes I know, and this is why I am asking people to experiment with flexbox.
The fix for IE10 is to give the right hand sidebar, (or the content) a larger flex-grow property, the bug is caused by the flex shorthand property not recognizing % values, and using the flex-basis as a set width instead of a preferred size.
I have logged the bug, (and many others) with the various browser bug bases.
This and other bugs, do have 'fixes', so I hope users will experiment with flexbox and provide feedback.
Flexbox is no different than any other css feature, "we can only find the problems in actual use".
Strangely enough, I have found the most consistent to use is the old 2009 implementation on mobile devices, (no doubt iOS7 will change all that ).
PZ

Similar Messages

Fireworks or Indesign for web page layout?

Hi, I've currently ordered CS3 Web Premium and it won't ship
until tomarrow, and I don't know whether I should cancel it and get
the Design Premium instead.
It all depends on whether Fireworks is a must have for web
page design. Does it offer anything invaluable that I need that
Photoshop Cs3 won't already fill? I saw the tour for InDesign and
was impressed how you can create amazing page layouts and how you
can export them to XHTML.
I probably won't be using Adobe Contribute as I prefer making
my own WYSIWYG editor in asp.net for my webpages, because I don't
want to buy a new license of Contribute for every web page I make
for a different client, so the choice of whether I should leave Web
Premium and get Design Premium rest on whether Fireworks is more
useful for webpage design and whether creating web page layouts
with InDesign is worth paying the extra money for (I don't mind
using it to create computer software manuals as well).
I appreciate any input on this matter. :)

Excellent clarifications, DWD.
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
Extending Knowledge, Daily
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
.:Adobe Community Expert for Fireworks:.
news://forums.macromedia.com/macromedia.fireworks
news://forums.macromedia.com/macromedia.dreamweaver
Deaf Web Designer wrote:
> Hi TheStrangerSome,
>
> If I may chime in and add to Jim Babbage's advice or
suggestion.
>
> Please note that there is no such a thing as "WYSIWYG"
editor. It is more
> accurate of putting "HTML" as HTML editing app.
> In addition to this aspect of discussion about web
authoring app issue, it
> should be addressed in either general discussion forums
either at Dreamweaver
> or Contribute for that matter.
>
> As for "changing the order" from Web Premium to Design
Premium, it is BEST if
> you talk to Adobe customer service department
immediately. Though, I believe
> that their business hours are based on Pacific Standard
Time Monday through
> Friday. Please refer to Contact as appeared on top of
Adobe systemwide website,
> including this forum. If you roll your browser up to the
top of webpage, you'll
> notice the term "Contact". use that link for further
details.
>
> I think you might be mistaken for term "layout" used in
InDesign or Fireworks.
> Please note that InDesign is specifically designed for
high-end
> professional-quality print layout such as magazine
articles, newspapers and PDF
> documentations (export as PDF format) straight out of
InDesign application.
> That might confuse you or led you into thinking that
InDesign is ideally a
> layout design for web. Actually, it is not.
>
> Perhaps that you stick to the fundamentals of Fireworks
or Photoshop and use
> them as layout structure and then transfer them into
Dreamweaver CS3. Please
> try to keep this as simple as much as you can when you
produce a layout design
> in Fireworks (or Photoshop). If you are good at HTML and
CSS editing, then all
> you have to do is put in image files into Dreamweaver
and code away by linking
> or referencing image files to HTML.
>
> By the sound of your a bit of confusion or don't
understand the primary
> difference between Fireworks, Photoshop or InDesign, you
ought to keep it
> simple and take it easy. Becuase you will probably feel
overwhelemed with all
> of these powerful applications and not knowing the
primary functionality or the
> main purposes of these applications and what they are
for, etc.
>
> So, hopefully this helps you better understand and try
to figure this out
> yourself, because you know what's the best for you.
>
> Hope that helps, no?
>
>
> P.S. Please note that Adobe forums are based on
"volunteer-basis", which means
> it is not monitored or run by full-time Adobe staff or
team from Adobe.
> Although, there are times, that some people from Adobe
chime in and offer some
> tips or suggestion or pointers. In other words, there
are thousand of forum
> participants, like you, helping each other. Hopefully
that helps, too.
>
>
quote:
Originally posted by:
TheStrangerSome
> Hi, I've currently ordered CS3 Web Premium and it won't
ship until tomarrow,
> and I don't know whether I should cancel it and get the
Design Premium instead.
>
> It all depends on whether Fireworks is a must have for
web page design. Does
> it offer anything invaluable that I need that Photoshop
Cs3 won't already fill?
> I saw the tour for InDesign and was impressed how you
can create amazing page
> layouts and how you can export them to XHTML.
>
> I probably won't be using Adobe Contribute as I prefer
making my own WYSIWYG
> editor in asp.net for my webpages, because I don't want
to buy a new license of
> Contribute for every web page I make for a different
client, so the choice of
> whether I should leave Web Premium and get Design
Premium rest on whether
> Fireworks is more useful for webpage design and whether
creating web page
> layouts with InDesign is worth paying the extra money
for (I don't mind using
> it to create computer software manuals as well).
>
> I appreciate any input on this matter. :)
>
>
>
Excellent clarifications, DWD.
Jim Babbage - .:Community MX:. & .:Adobe Community
Expert:.
Extending Knowledge, Daily
http://www.communityMX.com/
CommunityMX - Free Resources:
http://www.communitymx.com/free.cfm
.:Adobe Community Expert for Fireworks:.
news://forums.macromedia.com/macromedia.fireworks
news://forums.macromedia.com/macromedia.dreamweaver

Poonya Script :: The new programming language for Web

Poony Script is a new programming language for Web, working with proxies between Flash Player and ActionScript 3, and a powerful performance and high flexibility of development, in addition to being free and unrestricted.
To learn more about the novel technology in between:
http://www.poonya.com/

Hello AHernandezIP,
The "Poony Script" was not made up to leave the AS3, but to expand the capabilities of it in Flash.
The performance needs been studied carefully, and we get more than 80% of the performance of AS3, and it is still better and better that agent works in the API.
Yet even this year we will be launching version "Studio" to create files 'swf' directly from the browser.
We now know that more and more programs are becoming more complex, and the famous "Internet Cloud" is coming increasingly to everyone.
The need now is to make a compiler that runs directly from the browser without installing anything on your computer.
Who has vision of the future known as the "Poony Script" will be helpful.
Thank you!

Strongly Suggest the Apple to develop the new input method for Chinese

As we know, there is only one input method in iOS, but it is really hard to use, so I strongly suggest the Apple to develop the new input method for Chinese, any body agree with me? please support our suggestion!!!! thanks.

ZhangWQ wrote:
As we know, there is only one input method in iOS,
I am puzzled by your statement. Here is the list of 7 that I see:
Simplified Chinese: Handwriting, Pinyin, Stroke,
Traditional Chinese: Pinyin, Zhuyin, Cangjie, Stroke
When you use the feedback channel to contact Apple, make sure you tell them exactly what it is you want. Asking them to "develop a new input method" will certainly just be ignored because they will have no idea what you are talking about.

Remove details for web page object types in search results

Within the search results, the first 200 characters are displayed for documents, web pages, etc.. Web pages show the HTML code. Is there a way to hide these details for web pages but have them visible for all other object types?

The solution can be found in this thread: http://discussions.apple.com/thread.jspa?threadID=2456976
Download Secrets at http://secrets.blacktree.com/
Install the prefspane, select Safari in the left hand list, and uncheck "Use new URL completion list".
You need to log out and log in again for it to work.

Since installing firefox, none of my dscktop icons for web page short cuts work. Why?

None of my desktop icon short cuts for web pages work since I installed firefox.
Why?
Can you help me with this?

You can check for issues with the Windows icon cache and try to rebuild the icon cache.
# Open the Task Manager (Shift+Ctrl+ESC)
# In the Process tab, right-click on the Explorer.exe process and select End Process.
# Open the file picker via "File > New Task (Run)" and click the Browse button.
# Type or Paste %USERPROFILE%\AppData\Local (%LocalAppData%) in the File name field (AppData is a hidden folder).
# Select the IconCache.db file and use "Delete" in the right-click context menu to delete the file.
# After the IconCache.db file has been deleted, start a new explorer.exe process via "File > New Task" to get the desktop and Taskbar back.
The IconCache.db file is a hidden file, so make sure that you can see hidden files.
* http://kb.mozillazine.org/Show_hidden_files_and_folders

Safari signs me out of a web page each time I open a new tab within a web page I am already signed in to

How can I stop Safari from signing me out of a web page each time I open a new tab within a web page I am already signed in to?
This is very annoying, how can I stop this??

Extensions.
1. Empty Caches
    Safari > Preference > Advanced
    Checkmark the box for "Show Develop menu in menu bar".
    Develop menu will appear in the Safari menu bar.
    Click Develop and select "Empty Caches" from the dropdown.
2. Delete Cookies
    Safari > Preferences > Privacy > Cookies and other website data:
    Click “Remove All Website Data”.

Is it possible to specify print settings for web pages?

Is it possible to specify print settings for web pages designed in Muse? For example, can you exclude background images from printing?

Hello,
You can define Print Setting to page By Defining CSS Style in page Header by typing Style tag.
you can go to Page > Page Properties > Metadata > HTML for <Head>.
you can refer to the link below for more details about Print properties in CSS.
http://www.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
Regards
Vivek

I'm having problems with 8.1 and Continuity / Handoff. It will work fine for web pages, etc. but in email when I try to do it between by iPhone 5s running 8.1 and my Macbook Pro running Yosemite I consistently get an error.

I'm having problems with 8.1 and Continuity / Handoff. It will work fine for web pages, etc. but in email when I try to do it between by iPhone 5s running 8.1 and my Macbook Pro running Yosemite I consistently get an error. "Failed to Continue Activity" Cocoa Error 4609. Handoff is working for phone calls and text messages. By email just crashes each time. It was also doing it under 8.0.2. My iPhone and iPad handle this fine. It's only the MacBook to the iPhone that fails, and only on email.

Handoff Continuity Troubleshooting

How do i fix my printer when it won't show the print preview for web pages? it worked and now not.

how do i fix my printer when it won't show the print preview for web pages? it worked for a while and now it doesn't. printer is an hp officejet 7310 all-in-one.

I would suspect this is a hardware issue. The rollers are probably having issues picking up the relatively smooth thick media. You might have better results be cleaning the paper pickup rollers with a damp paper towel. Also make sure the paper is snugly loaded and the paper guides have been correctly positioned.
Regards,
Bob Headrick, MS MVP Printing/Imaging
Bob Headrick, HP Expert
I am not an employee of HP, I am a volunteer posting here on my own time.
If your problem is solved please click the "Accept as Solution" button ------------V
If my answer was helpful please click the "Thumbs Up" to say "Thank You"--V

How can i see visitor statistics for web page hosted on osx lion server

Hello
how can i see visitor statistics for web page hosted on osx lion server
Thanks
Adrian

Just click inside the url address bar. Full url address highlighted, will appear.
Best.

Using Java for Web Pages

Is there any way to completely avoid HTML for Web pages? can Java be used entirely for sites?

(X)HTML cannot be completely avoided, this is the only one markup language which the web browser can interpret to display websites. If you want to avoid writing plain vanilla HTML and scriptlets and want more interaction with Java, consider a MVC framework like JSF or Struts.

The latest version of Firefox has totally stuffed my computer. Nothing now works properly and all my settings for web pages have totally disappeared.

Latest version of Firefox has totally stuffed my computer. Nothing works properly and all settings for web pages have disappeared.

Make sure that you allow pages to choose their colors and that you haven't enabled High Contrast in the Accessibility settings.
*Tools > Options > Content : Fonts & Colors > Colors : [X] "Allow pages to choose their own colors, instead of my selections above"
*http://kb.mozillazine.org/Website_colors_are_wrong
*https://support.mozilla.org/kb/Websites+look+wrong

Resizing pixs for web page use

I have resized the photos to use on MS Frontpage but when the thumbnails are clicked on to be enlarged in the web page they are still too large. How do I make photos usable for web page use?

What version of Elements are you using? How are you now going about creating the thumbnails and larger images? What size are you making the large ones? I suspect all you need to do is change the width and height parameters to something smaller.

What happened to the add to home page option for web pages. Can't find it.

What happened to the add to home page option for web pages. Can't find it.

Try stopping Safari followed by resetting your phone: double-tap the home button, locate Safari at the bottom (swiping if necessary), tap and hold until it wiggles, tap the minus sign. Now reset: hold the on/off and home buttons until you see the Apple logo (ignore the off slider that appers first), then release. If it still is missing you may need to restore your phone, which will put a fresh copy of the iOS on your phone (see http://support.apple.com/kb/HT1414).

CSS Flexbox - a new layout method for web pages

Similar Messages

Maybe you are looking for