=====
CS 328 - Week 8 Lecture 2 - 2024-03-06
=====
=====
TODAY WE WILL
=====
* announcements
* ONE way to center a block element
* intro to CSS flexbox layout
* intro to CSS grid layout
* prep for next class
=====
* should be working on HOMEWORK 6 -
* first attempts must be submitted by 11:59 pm on SUNDAY, MARCH 10
* should be working through zyBooks Chapters 3 and 4, on CSS!
=====
NOTE --
=====
* I am TRAVELING to a workshop and SIGCSE the week after Spring Break!
* so: will be RECORDED lectures for:
* Monday, March 18
* Wednesday, March 20
* ...and there will be a lab exercise you can do individually OR in pairs
(your choice!) for Friday, March 22
* hey, BSS 313 is available during the regular lab time, after all!
* it will be due 11:59 pm on Friday, March 22
====
one way (of several!!) for centering a block element
====
* block elements by default take up the entire width
of their container
BUT they also have a width property you can use
to specify a narrower width than that;
* and *then* savvy setting of margin-left and margin-right
can achieve centering of a block element;
FOR EXAMPLE:
...
width: 10em;
margin-left: auto;
margin-right: auto;
...
...
width: 50%;
margin-left: 25%;
margin-right: 25%;
...
(and other combos are definitely possible!!)
=====
display property
=====
* there are times when you can specify
that you'd like a different style of display
formatting than the default for something;
display property lets you do this
* display: inline; /* display element like an inline element */
display: block; /* display element like a block element */
....
* and to use so-called flexbox layout,
you give the container whose contents will use flexbox
the property:
display: flex;
* and to use the so-called grid layout,
you give the container whose contents will use grid layout
the property:
display: grid;
=====
flexbox layout
=====
* tries to provide an efficient way to lay put elements
in a container so they behave predictably when the
container is resized or viewed on different screen sizes
* when you include in a rule styling an element:
display: flex;
...now the elements within that so-called flex container
will now be laid out using flexbox instead of normal flow
* those children within a flex container may be called
flex items
=====
* flex-direction: direction of the items in the flex container
=====
* default: row /* lay out the items in a row */
column /* lay out the items in a column */
(and several other odd ones, see zyBooks chapter 4!)
=====
* justify-content: justifies the flex items within the container
as specified
=====
* default: flex-start /* left- or top-justified, depending on the
flex-direction */
flex-end /* right- or bottom-justified, depending on the
flex-direction */
center /* all the items are centered */
space-between /* put stretchy space between the elements */
space-around /* put stretchy space between AND before AND
after elements the elements */
=====
* flex-wrap: will the elements wrap onto multiple rows if the
container is too narrow?
=====
* default: nowrap /* they won't */
wrap /* they will */
=====
intro to grid layout
=====
* when you want to layout the elements in a container
thinking of rows and columns...
* the container to have rows and columns of elements
gets:
display: grid;
=====
* one way to specify the number of columns:
grid-template-columns:
...followed by the size or auto for each desired column
* grid-template-columns: 10% 40% 25% 25%;
* 4 columns, first taking ~10% of the width,
second taking ~40% of the width,
third taking ~25% of the width,
fourth taking ~25% of the width;
* want two even columns?
grid-template-columns: 50% 50%;
grid-template-columns: auto auto;
* both of the above work in little div with
class="post-class-tests" tried after class!
=====
default grid layout child element placement
=====
* if you JUST make the container a grid,
and specify a number of columns with grid-template-columns,
the grid child elements will be laid out in the container
in row-major order in
the order they appear in the document --
left-to-right, top-to-bottom
=====
grid-column and grid-row properties
=====
* HOWEVER, there are also means to specify WHERE in
the grid container to place a grid child --
for example,
you can specify the location for a grid child element
by providing a rule for that grid child
specifying grid-column and grid-row properties
* imagine a grid with the column LINES numbered starting at the
top with 1, 2, 3, etc.,
and with the row LINES numbered starting at the left with
1, 2, 3, etc.
(drew on whiteboard, included a little drafty image from my
notes with these notes)
* grid-column: X / Y;
* asks to place this element starting at column line X, continuing
to column line Y
* grid-column: X;
...asks to place this element starting at column line X,
taking up just one column from there.
* grid-row: X / Y;
* asks to place this element starting at row line X, continuing
to row line Y
* grid-row: X;
...asks to place this element starting at row line X,
taking up just one row from there.
* in this approach, grid children elements you don't specify
a place for will get placed by default -- sometimes in
row-major ways that make sense, sometimes more oddly...?
* demo'd for three of the div elements in 328lect08-2.css
(see the rules with selectors
.grid-demo-1 .one
.grid-demo-1 .two
.grid-demo-1 .three
)
=====
grid-area and grid-template-areas properties
=====
* ANOTHER means of specifying WHERE in the grid
container to place a grid child
for each grid child element to be placed,
provide a rule for that grid child element
with a:
grid-area: desired-name;
...property specifying a NAME for that grid-area
then, in a rule for the grid *container*,
include a:
grid-template-areas: "... "
"... "
...
"... ";
... property whose content is a set of quoted strings,
one per desired row,
containing the grid-area names of the child
elements to be placed in each grid row,
(or a . to say not specifying anything for that grid cell),
* and if you want a child to take up multiple columns,
list its name once per column it is to fill,
* and if you want a child to take up multiple rows,
list its name once per row it is to fill
* (and any child elements you don't include or
give names for look like they will be placed
in remaining grid cells by default -- maybe in
row-major order...?)
* demo'd for three of the div elements in 328lect08-2.css
(see the rules with selectors
.grid-demo-2
.grid-demo-2 .one
.grid-demo-2 .two
.grid-demo-2 .three
)