With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
Enhancing Responsiveness With Flexbox (Smashing Conference)Zoe Gillenwater
View the demos and get links to related files at http://zomigi.com/blog/rwd-flexbox. In this presentation, I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.
Enhancing Responsiveness With Flexbox (CSS Day)Zoe Gillenwater
View the demos and get links to related files at http://zomigi.com/blog/rwd-flexbox. In this presentation, I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Zoe Gillenwater
Flexbox and responsive web design go great together, like peanut butter and jelly! Flexbox gives you more control over the things you care about in a responsive layout and lets you create much morecomplex and reliable layouts than you can with floats, table display, or inline-block. All with far less CSS.
In this talk, you’ll learn what flexbox features are particularly suited to responsive layouts and how you can harness them by applying flexbox as a progressive enhancement. We’ll look at examples of responsive page components and patterns that you can enhance further by layering flexbox on top of other layout methods, ensuring all users get a good experience.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
Enhancing Responsiveness With Flexbox (Smashing Conference)Zoe Gillenwater
View the demos and get links to related files at http://zomigi.com/blog/rwd-flexbox. In this presentation, I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.
Enhancing Responsiveness With Flexbox (CSS Day)Zoe Gillenwater
View the demos and get links to related files at http://zomigi.com/blog/rwd-flexbox. In this presentation, I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.
Enhancing Responsiveness with Flexbox (CSS Conf EU 2015)Zoe Gillenwater
Flexbox and responsive web design go great together, like peanut butter and jelly! Flexbox gives you more control over the things you care about in a responsive layout and lets you create much morecomplex and reliable layouts than you can with floats, table display, or inline-block. All with far less CSS.
In this talk, you’ll learn what flexbox features are particularly suited to responsive layouts and how you can harness them by applying flexbox as a progressive enhancement. We’ll look at examples of responsive page components and patterns that you can enhance further by layering flexbox on top of other layout methods, ensuring all users get a good experience.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
Enhancing Responsiveness with Flexbox (RWD Summit)Zoe Gillenwater
View the demos and get links to related files at http://zomigi.com/blog/rwd-flexbox. In this presentation, I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
Responsive Flexbox Inspiration (Responsive Day Out)Zoe Gillenwater
I think the biggest obstacle to getting started with flexbox is not being able to picture how to use it, because you’re stuck thinking in terms of what was possible with floats and other old layout methods. It was the same when we switched from tables to CSS layout, and from fixed to fluid layout—you had to make a mental shift to start thinking in terms of the new possibilities and approaches to old problems.
Flexbox lets you do lots of things you haven’t been able to do before, and some things you could do before but now in a simpler way. Once you see what flexbox can do in the real world, you can start picturing how to use it in your own work to solve real RWD problems today. Flexbox can be tricky to wrap your head around at first, but once you’ve learned it, it’s an incredibly quick, cheap way for you to add more responsiveness to your components.
Web developers have been trying to solve layout issues since the dawn of web. We started with tables, then floats and grids—each technique had its limitations. Thanks to Flexbox, it’s all about to change.
Flexbox is one of the most promising yet underutilized additions to the CSS3 specification. Using this layout model you can arrange elements in any direction, align them, distribute the space, assign sizes, stretch or shrink them to fit in parent element, wrap or rearrange them—all with far less CSS compared to grids.
Flexbox truly shines when used in responsive design. Changing the visual order, alignment, assigning proportional sizes of your boxes becomes a breeze. In this presentation, learn the basics of Flexbox specification and explore some of its practical uses.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
Say goodby to Float. Float save us until today. But float was never the right solution. With Flexbox and Grid Layout, we have the right solutions (maybe) to structure layouts to many devices and screens, with less work, easy (not so much) to understand syntax and maintainable code.
Lets talk today about Flexbox and Grid Layout and how they work.
Putting Flexbox into Practice presentation for Fronteers conference, October 10, 2013. Slightly updated version of slides posted in September. Get links to the demo page and related resources at http://www.zomigi.com/blog/flexbox-presentation.
The Flexbox (or Flexible Box) Layout Model is a set of CSS attributes allowing for the efficient creation of robust, multi-screen application layouts. Flexbox uses a dual-axis container/item layout model allowing for powerful approaches to element space distribution, alignment, and sizing. This can be a tremendous boon for web projects with dynamic data and design flux. It may also tremendously simplify responsive layouts that are dependent on commonly complicated grid models.
This presentation will introduce the mechanics of the Flexible Box Model and demonstrate its capability for simplifying markup and styling.
Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle.
But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't.
In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY!
This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.
Новые факторы ранжирования. Лекция от Евгения Костина, руководителя отдела продаж в компании SeoPult. Данная презентация была показана на первой международной выставке Internet Avenue 2013, 26 апреля.
Enhancing Responsiveness with Flexbox (RWD Summit)Zoe Gillenwater
View the demos and get links to related files at http://zomigi.com/blog/rwd-flexbox. In this presentation, I talked about how to actually put flexbox to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement to improve sizing, spacing, and order in responsive web design, while still ensuring non-supporting browsers get an acceptable fallback experience.
With solidified syntax and great browser support, flexbox, the CSS layout module that can make your layouts more flexible and responsive with ease, is finally ready to be used in your real-world work. We’ll talk about the when, what, and how of using flexbox today: when it’s a great choice use flexbox (and when not to), what UI and UX problems it can help you solve, and how to add it to your layouts in a robust way that doesn’t harm non-supporting browsers or accessibility. You’ll learn a step-by-step process for deciding on and deploying flexbox, with lots of examples along the way of flexbox in the wild.
Responsive Flexbox Inspiration (Responsive Day Out)Zoe Gillenwater
I think the biggest obstacle to getting started with flexbox is not being able to picture how to use it, because you’re stuck thinking in terms of what was possible with floats and other old layout methods. It was the same when we switched from tables to CSS layout, and from fixed to fluid layout—you had to make a mental shift to start thinking in terms of the new possibilities and approaches to old problems.
Flexbox lets you do lots of things you haven’t been able to do before, and some things you could do before but now in a simpler way. Once you see what flexbox can do in the real world, you can start picturing how to use it in your own work to solve real RWD problems today. Flexbox can be tricky to wrap your head around at first, but once you’ve learned it, it’s an incredibly quick, cheap way for you to add more responsiveness to your components.
Web developers have been trying to solve layout issues since the dawn of web. We started with tables, then floats and grids—each technique had its limitations. Thanks to Flexbox, it’s all about to change.
Flexbox is one of the most promising yet underutilized additions to the CSS3 specification. Using this layout model you can arrange elements in any direction, align them, distribute the space, assign sizes, stretch or shrink them to fit in parent element, wrap or rearrange them—all with far less CSS compared to grids.
Flexbox truly shines when used in responsive design. Changing the visual order, alignment, assigning proportional sizes of your boxes becomes a breeze. In this presentation, learn the basics of Flexbox specification and explore some of its practical uses.
Flexbox and Grid Layout: How you will structure layouts tomorrow.Diego Eis
Say goodby to Float. Float save us until today. But float was never the right solution. With Flexbox and Grid Layout, we have the right solutions (maybe) to structure layouts to many devices and screens, with less work, easy (not so much) to understand syntax and maintainable code.
Lets talk today about Flexbox and Grid Layout and how they work.
Putting Flexbox into Practice presentation for Fronteers conference, October 10, 2013. Slightly updated version of slides posted in September. Get links to the demo page and related resources at http://www.zomigi.com/blog/flexbox-presentation.
The Flexbox (or Flexible Box) Layout Model is a set of CSS attributes allowing for the efficient creation of robust, multi-screen application layouts. Flexbox uses a dual-axis container/item layout model allowing for powerful approaches to element space distribution, alignment, and sizing. This can be a tremendous boon for web projects with dynamic data and design flux. It may also tremendously simplify responsive layouts that are dependent on commonly complicated grid models.
This presentation will introduce the mechanics of the Flexible Box Model and demonstrate its capability for simplifying markup and styling.
Flexbox is a smart new layout mode for CSS that solves many problems we've struggled with for years. It adds a degree of control we didn't have before. No longer will you need to struggle with floats and clearfixes to address page layout challenges they were never designed to handle.
But wait, I hear you say, a new layout mode? Surely the browser support is awful? It's actually quite good, and I will show you how to write future-proof code that will work flawlessly in browsers that support flexbox while providing a fallback to those that don't.
In this talk, I will introduce the flexbox layout module and explain what it's good for (and what's it's NOT good for). I'll give examples of usage, outline a strategy for browser support, and prepare you to use flexbox TODAY!
This is a beginner level talk. You do not need to know anything about flexbox, but a basic understanding of CSS layout will be helpful.
Новые факторы ранжирования. Лекция от Евгения Костина, руководителя отдела продаж в компании SeoPult. Данная презентация была показана на первой международной выставке Internet Avenue 2013, 26 апреля.
First year Digital Media studio. Design and build of a portfolio using HOTGLUE. Basics of structure and navigation design. Introduced with a look at designing within system restraints with real hotglue!
I gave a talk at WordCamp mumbai 2014, where i presented the idea that we can create more realistic prototypes on WordPress without writing single line of code. I believe that is the future of Prototyping
Putting Flexbox into Practice presentation for Blend Conference in Charlotte, September 7, 2013. Slightly updated version presented at Fronteers on October 10; slides at http://www.slideshare.net/zomigi/putting-flexbox-into-practice-fronteers. Get links to the demo page and related resources at http://www.zomigi.com/blog/flexbox-presentation.
There was a time in the not so distant future, that tables ruled the field of HTML page development. Kika Marketing and Communications is here to give you an idea about Flexbox.
Flex stands for flexibility, adaptability. Thus, flexible layout elements are flexible boxes. The ability to fill extra areas without using javascript is one of the key advantages of flexbox.
While the CSS Flexible Box Layout Module (Flexbox) has gone through some radical changes over the past two years, the specification is now stable enough for designers and developers to give it a hard look. Find out what Flexbox can (and can't) do to save your layout woes and how to integrate into your projects!
You’ve probably heard the phrase “learn to fail or fail to learn.” The idea that making mistakes is essential to success has almost become clichéd by now. But in this talk, Zoe is prepared to embarrass herself with tales of her web design screw-ups to prove just how important and powerful it truly is to make mistakes in our work. Along the way, you’ll learn CSS tips and tricks that Zoe learned the hard way so that you don’t repeat her mistakes. Go out, try new things with CSS, and make new mistakes of your very own!
This talk was given at beyond tellerrand // BERLIN 2014, 5 November 2014
You have some basic knowledge of HTML and CSS? Go further by learning how to build advanced layouts of real-life apps like Airbnb, Medium or Slack using the most recent CSS techniques.
Flexbox is a relatively new front-end feature that greatly simplifies the process of creating a responsive website layout. In the past, in order to create a layout that looked good on a website, you had to use tables or float grids. Furthermore, those approaches aren't the most effective for responsive design, which ensures that the website looks good on desktop, tablet, and mobile platforms. Learn how to use flexbox if you want to stay up to date Flex Web Development with web development trends.
Windows Presentation Foundation (WPF) allows developers to easily build and create visually enriched UI based applications. The classical UI elements or controls in other UI frameworks are also enhanced in WPF applications.
Show vs. Tell in UX Design (Front in Amsterdam)Zoe Gillenwater
We’ve all heard these “laws” of design: “People don’t read on the web.” “If you have to explain how to use your product, you’ve failed.” “A picture is worth a thousand words.” It seems like our job as designers is to make things as intuitive as possible, using as few words as possible so that the meaning is self-evident through our visual design. But does this always produce the best user experience? Is showing always better than telling? We’ll look at several examples of design from the real world, the web, and apps that use showing, telling, or both as a method for producing the best UX. Rather than just assuming one is always better than the other, learn how to choose the right approach for your particular design problem and users.
Keynote presented at CSS Dev Conference on October 21, 2013. I talked about evolving who we are as web designers and developers by focusing on the power of "just one" in learning, failing, and accepting. Simplicity is powerful.
The updated CSS Dev Conference version of my Building Responsive Layouts talk. Get links to lots of related resources at http://zomigi.com/blog/responsive-layouts-css-dev-conf.
Get links to lots of related resources at http://zomigi.com/blog/responsive-layouts-presentation.
In this presentation, you'll learn about two of the core components of responsive web design: fluid/liquid layouts and media queries. I cover fluid and hybrid fixed-fluid layout techniques, tips, and tricks so that you can build robust, flexible layouts without pulling your hair out. I then walk through adding CSS3 media queries onto a fluid layout to make it fully responsive to a variety of screen sizes and devices. Even older versions of Internet Explorer get some love with solutions to help them deal with your shiny new responsive layouts.
Learn about the basics of web accessibility: what it is, who it affects, why it matters, and some of the fundamental things you ought to be doing in your pages to make them more accessible.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
This 7-second Brain Wave Ritual Attracts Money To You.!nirahealhty
Discover the power of a simple 7-second brain wave ritual that can attract wealth and abundance into your life. By tapping into specific brain frequencies, this technique helps you manifest financial success effortlessly. Ready to transform your financial future? Try this powerful ritual and start attracting money today!
ER(Entity Relationship) Diagram for online shopping - TAEHimani415946
https://bit.ly/3KACoyV
The ER diagram for the project is the foundation for the building of the database of the project. The properties, datatypes, and attributes are defined by the ER diagram.
Multi-cluster Kubernetes Networking- Patterns, Projects and GuidelinesSanjeev Rampal
Talk presented at Kubernetes Community Day, New York, May 2024.
Technical summary of Multi-Cluster Kubernetes Networking architectures with focus on 4 key topics.
1) Key patterns for Multi-cluster architectures
2) Architectural comparison of several OSS/ CNCF projects to address these patterns
3) Evolution trends for the APIs of these projects
4) Some design recommendations & guidelines for adopting/ deploying these solutions.
8. What browsers do I need to
support?
Don’t ask yourself this—it’s irrelevant here
(IMO)
9. Flexbox has 94% coverage worldwide
We support IE 7-9 at Booking, but still use flexbox as
progressive enhancement.
10. Do I want to create a layout in
1 dimension (row OR column)
or 2 dimensions?
Hat-tip to Rachel Andrew:
https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/
11. Flexbox is not a grid
Not meant for or great at whole page layout
Flex items only care about space in their
own row/column
They don’t care about lining up in the other
dimension
12. Demo by Rachel Andrew: http://codepen.io/rachelandrew/pen/YqqdXL
13. Flexbox is best for:
UI components
Simple whole page layouts (not grid-based)
Enhancing a complex layout’s alignment,
spacing, etc. (not controlling placement)
14.
15. Do I need my content to dictate
sizing and placement,
or do I need to control these?
16. Content determines
boxes’ size and
placement
(Mega-useful when
content is unknown and
variable, or readability is
a top priority.)
Structure determines
content’s size and
placement
(P.S. Flexbox can do this
too, if you want. It’s just
the reverse that doesn’t
work so well.)
Flexbox Grids
17. Does flexbox offer me anything
I can’t already get
from an existing layout method?
18. New things flexbox offers
Content-driven, unit-less sizes
Content-driven, media-query-less layout changes
Mixed-unit layouts
Equal-height columns
Vertical centering and other alignments
Spacing out or stretching items to fill unknown width/height
Combining content wrapping and block wrapping
Pinning items without overlaps
Visual order different than HTML/reading order
26. My copy of that form
Same floats, same percentage widths
27. The trouble with explicit sizing
Since the select and button are sized by a
percentage, not sized automatically by their
content, this can happen:
Box too small for its content Box too big for its content
28. Use the flex property instead
Tells browser starting size (including content
size) and whether item can grow or shrink
width: 33.333%
flex: auto
Fill up remaining space
width: 16.666%
flex: none
Size to content exactly
29. Form fields are a pain in the butt
The fields and button don’t all match each
other exactly in height
30. Fix alignment with flexbox
Turn each field wrapper into flex container so
field inside will stretch to match height of line:
.flexbox .jobs-form_field-wrapper {
display: flex;
align-items: stretch; /* default */
width: auto;
}
Fields misaligned without flexbox Fields match height due to align-items
35. Defining the flex property
flex-grow
how much flex
item will grow
relative to
other items if
extra space is
available
(proportion
of extra space
that it gets)
flex-shrink
how much item
will shrink
relative to others
if there is not
enough space
(proportion of
overflow that
gets shaved off)
flex-basis
the initial
starting size
before free
space is
distributed
(any standard
width/height
value, including
auto)
36. Translating the flex property
.sb-dates {
display: flex;
}
.sb-dates__icon {
flex: 0 0 23px;
}
.sb-dates__select-day {
flex: 1 0 auto;
margin: 0 6px;
}
.sb-dates__select-month {
flex: 1 1 auto;
}
Start out 23px wide, and don’t grow
or shrink further
Start out sized to your content, then
grow with 1 share of any extra space
available, but don’t ever shrink
Start out sized to your content, then
grow with 1 share of extra space, but
if there’s an overflow shrink
37. Mixed-unit layout is easier with
calc(), but not even it can do:
calc(100% - 23px - the width of
the day field in Greek)
38. Taking advantage of variable space
Task: add a
message about
low availability
of the room
price shown:
“We have only X
left on our site!”
How about right here
in this lovely big gap?
39. Taking advantage of variable space
Problem: the gap
is not always big
enough to hold a
sentence of text
40. Taking advantage of variable space
Solution: use
flexbox to place
text beside price
when space
allows; otherwise,
it can wrap below
price
45. Layout change without media query
1. Let the blocks wrap and stack when needed:
.article-header {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
/* default */
46. Layout change without media query
2. Size the blocks to control their wrapping
point:
.article-header-image {
flex: 1 1 320px;
padding-left: 20px;
}
.article-header-text {
flex: 1 1 20em;
padding-left: 20px;
}
47. In other words…
Not enough space for
320px + 20em, so text
block wraps. Each block
then stretches wider than
320px/20em to fill its line.
320px + 20em is less than 100%, so both can fit together
on single line. Each then stretch equally as needed to
fill 100% of the space.
48. Stretching to fill unknown width/height
flex: 1 1 auto
align-content:
space-between
49. Improved wrapping in RWD layout
With float or text-align With flex or justify-content
50. Flexbox is great for spacing
and aligning stuff, especially
shifting content in RWD.
51. Demo: full-width nav bar
All links on same line
First link flush left, last link flush right
Equal spaces between all links
52. Trying display:table-cell
All links on same line
First link flush left, last link flush right
Equal spaces between all links
59. Demo: full-height stacked icons
1. Turn children .icons and .content into
side-by-side, equal-height flex items
.wrapper {
display: flex;
align-items: stretch; /* default */
}
60. Only children become flex items
So these 2 children are the flex items
This is the flex container
These 3 grandchildren aren’t flex items (yet)
61. Demo: full-height stacked icons
2. Turn .icons into flex container with
vertically stacked children (the 3 icons):
.icons {
display: flex;
flex-direction: column; /* main axis */
}
62. Demo: full-height stacked icons
3. Equally space the 3 icons along the vertical
main axis:
.icons {
display: flex;
flex-direction: column;
justify-content: space-between;
}
66. Improve the wide layout
Wide: too stretched out
A more responsive enhancement
67. order
integer to specify flow order of flex items
0 0 0default source order 0 0
10 0re-ordered 0 0
0 0-1re-ordered 0 0
210re-ordered 10
68. Use order property to move logo
1. Divide nav bar into order groups:
.list-nav-item_home, .list-nav-item_builder {
order: 0; /* default, and first here */ }
.logo {
order: 1; /* second */ }
.list-nav-item_party, .list-nav-item_tumblr {
order: 2; /* last */ }
69. Use order property to move logo
2. Split extra space on line to center logo:
.logo {
order: 1;
margin-left: auto;
margin-right: auto;
}
71. Order only works on siblings
To move logo to middle of list, it needs to be
part of list
<div class="logo"><img src="images/logo.png"></div>
<ul class="list-nav">
<li class="logo"><img src="images/logo.png"></li>
<li class="link-home"><a>home</a></li>
<li class="link-builder"><a>s'mores builder</a></li>
<li class="link-party"><a>throw a party</a></li>
<li class="link-tumblr"><a>tumblr</a></li>
</ul>
84. Browser support approaches to choose
Use only the non-prefixed, standard syntax
… plus browser-prefixed versions of
standard syntax
… plus -ms- prefixed 2011/2012 syntax
… plus -webkit- prefixed 2009 syntax
85. I recommend you skip the ‘09 syntax
It’s slower to render than current syntax*
Doesn’t support wrapping
Its browsers have small market share
If using flexbox for progressive
enhancement, its browsers can get same
fallback given to non-supporting browsers
* http://updates.html5rocks.com/2013/10/Flexbox-layout-isn-t-slow
86. Let tools add browser variants for you
Autoprefixer: https://github.com/ai/autoprefixer
Sass or LESS mixins can be customized to
add just the browser variants you want
https://github.com/mastastealth/sass-flex-mixin
https://gist.github.com/cimmanon/4461470
https://github.com/thoughtbot/bourbon/blob/mast
er/app/assets/stylesheets/css3/_flex-box.scss
https://github.com/annebosman/FlexboxLess
87. Add Modernizr as needed with flexbox
Flexbox and fallback styles can often co-
exist, but sometimes need to isolate them
http://zomigi.com/blog/using-modernizr-with-flexbox/
88. Or use @supports
.gallery-item {
display: inline-block;
}
@supports (flex-wrap: wrap) {
.gallery {
display: flex;
flex-wrap: wrap;
}
}
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
But IE 10-11, which do
support flexbox but
don’t support
@supports, won’t get
these styles
90. Things to consider
Do I need content blocks to wrap? not table-cell
Do I want to prevent blocks from wrapping? floats, inline-block, but
table-cell best
Do I need content-driven sizes? floats, but table-cell or
inline-block best
Do I need vertical alignment? inline-block, table-cell
Do I need horizontal alignment? floats, table-cell, inline-
block only with preset
sizes
91. Pick your starter layout CSS
Floats
table-cell
inline-block
Absolute positioning
Flexbox will override: Flexbox will not override:
Just use whatever you normally would;
flexbox plays nicely with most of them.
93. Split left-right layout
Task: lay out review score
and price, on opposite
sides of same line
Needs:
content-driven sizing
horizontal alignment
wrapping
score price or
“sold out”
97. Creating the block flex container
.iw_mini_details_wrapper {
display: flex;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
Flex container sits
on a new row below,
like a block element
99. Things to consider
Lay out horizontally or vertically? flex-direction:row or
column
Allow boxes to wrap? flex-wrap:wrap,
wrap-reverse or nowrap
Order different than source? order values;
flex-direction:
row-reverse or
column-reverse
101. Decide which items can
grow to fill space,
shrink to avoid overflow,
or must stay at a certain size
102. Tips for setting flex values
Write out full flex values, rather than
using single-digit and keyword values
flex: 1 1 0% instead of flex: 1
Hidden default values can lead to mistakes
Avoids IE 10-11 bugs
Think about it backwards: first decide
flex-basis, then -shrink, then -grow
103. Tips for setting flex-basis values
Acts like min-width when wrapping on
If flex-wrap off and flex-shrink on,
browser can go smaller than flex-basis
Be careful with flex-basis:0 when
wrapping
Use flex-basis:auto whenever possible
108. Main axis alignment
(horizontal when row,
vertical when column)
Cross axis alignment
(vertical when row,
horizontal when column)
(P.S. Also responsible for
equal-height columns)
justify-content align-items
109. Controlling alignment
.iw_mini_details_wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
}
.iw_mini_review_score_wrapper {
float: left;
}
.iw_mini_price_wrapper {
float: right;
}
Moves first item to left,
last item to right
113. Testing your flexbox
Too Flexy bookmarklet for toggling
Modernizr flexbox classes:
http://chriswrightdesign.github.io/tooflexy/
If reordering, check tabbing and screen
reading order to make sure it’s still logical
115. Summing up the process
1. Decide whether to use flexbox and which browser
versions of it
2. Choose and add starter layout CSS
3. Choose and add flexbox CSS
1. Block or inline-block container
2. Flow
3. Flex to control sizing
4. Alignment
4. Test and fix bugs
116. Flexbox is not for the future.
You can use flexbox today.