The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)
178 Chapter 14 animation-duration The duration of an animation is set by the animation-duration property, which is functionally ...
Transitions and Animations 179 animation-iteration-count Unlike a transition, which only happens once (or twice, if you want to ...
180 Chapter 14 Transition Transition Iteration Transition Transition Iteration Transition Transition Iteration Transition Transi ...
Transitions and Animations 181 So returning to the previous example code, if you add the following rule: E { animation-fill-mode ...
182 Chapter 14 To make the example I’ve been building in this chapter somewhat more compact, I can use this shorthand code: div ...
Transitions and Animations 183 Because my animation-direction value is alternate, the animation would then play in reverse, shri ...
...
15 Flexible box layout That web pages look as good as they do is a minor miracle (comparatively speaking, of course!). Since the ...
186 Chapter 15 Declaring the Flexible Box Model The first step in using Flexbox is to create the flex container—the parent ele- ...
Flexible Box Layout 187 Flexbox Alignment Flexbox uses two axes for alignment. As shown in Figure 15-2, the main axis goes in th ...
188 Chapter 15 The result is shown in Figure 15-3. Figure 15-3: The row-reverse value quickly reverses the order of flex items. ...
Flexible Box Layout 189 Figure 15-4 shows the result. Figure 15-4: The flex items reordered using ordinal groups Notice that ite ...
190 Chapter 15 To expand the items to fill the container, you can use the flex-grow property: .flex-item { flex-grow: 1; } The v ...
Flexible Box Layout 191 The flex-shrink Property Just as flex-grow is used to expand flex items to fill their container, flex-sh ...
192 Chapter 15 When flex-basis is applied, any existing width value is ignored, and the value that you specify for the flex-basi ...
Flexible Box Layout 193 Here, element E has a flex-grow value of 1 and a flex-shrink value of 2. The value used is chosen based ...
194 Chapter 15 Figure 15-10: Different values for the justify-content property: flex-start (top), center (middle), and space-aro ...
Flexible Box Layout 195 Figure 15-11: Alignment on the cross axis is controlled with different values for align-items: stretch ( ...
196 Chapter 15 Wrap and Flow When you have too many items to fit comfortably into one row (or column) of a container, you can br ...
Flexible Box Layout 197 center, space-between, and space-around—and also adds stretch, which resizes the items to fill all unuse ...
«
6
7
8
9
10
11
12
13
14
15
»
Free download pdf