CSS Flexbox provides a practical way to arrange a component’s contents along one direction. In a photo carousel, `display: flex` with `flex-direction: column` stacks the headers, image container, and buttons vertically. section 2.6
Stretching the carousel image area
Set the carousel to a fixed size and column layout, then give its image container `flex: 1`. The container expands into the remaining space around the headers and buttons. Additional background properties keep the current image contained, centered, and non-repeating. section 2.6
Listing 2.9. Adding some CSS to style our component
. . .
</script>
<style>
wcia-photo-carousel { #1
width: 500px;
height: 300px;
display: flex;
padding-top: 10px;
flex-direction: column;
border-color: black;
border-width: 1px;
border-style: solid;
}
wcia-photo-carousel h2, h4 { #2
margin-bottom: 0;
margin-top: 0;
margin-left: 10px;
}
wcia-photo-carousel .image-container { #3
margin-top: 15px;
flex: 1;
background-color: black;
}
</style>
Inspect the complete CSS listing for the carousel container, column direction, spacing, border, and flexible image area. section 2.6
