css flexbox
the combined widths of all the flex items within it.
Items shrink when the width of the parent container is smaller than
justify-content: center;
There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is which aligns all the flex items to the center inside the flex container.
flex property
There is a shortcut available to set several flex properties at once. The flex-grow, flex-shrink, and flex-basis properties can all be set together by using the
flex-shrink
When it's used, it allows an item to shrink if the flex container is too small
align-self
accepts the same values as align-items and will override any value set by the align-items property.
center
align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).
baseline
align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.
space-between:
aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container
flex-end:
aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.
flex-end
aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.
flex-start:
aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no
flex-start
aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.
flex containers
also have a cross axis which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
vertically
creating a column using flex direction will align the children
align-self
his property allows you to adjust each item's alignment individually, instead of setting them all at once.
flex-basis
property are the same as other size properties (px, em, %, etc.). The value auto sizes items based on the content.
flex-grow
property controls the size of items when the parent container expands. and is the opposite of flex-shrink
align-items
property is similar to justify-content. Recall that the justify-content property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.
order
property is used to tell CSS the order of how flex items appear in the flex container
flex-basis
property specifies the initial size of the item before CSS makes adjustments with flex-shrink or flex-grow.
flex-wrap
property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
space-around:
similar to space-between but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.
strecth
stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no align-items value is specified.
main axis
the direction the flex items are arranged is called the
nowrap
this is the default setting, and does not wrap items.
wrap
wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.
wrap=reverse
wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.
visual elements , placement or positioning of those elements
A website's User Interface ("UI") has two components
display: flex;
Add the CSS property display to #box-container and set its value to flex. #box-container { height: 500px; }
#box-1 {flex: 2 2 150px; background-color: dodgerblue; height: 200px; } #box-2 {flex:1 1 150px; background-color:
Add the CSS property flex to both #box-1 and #box-2. Give #box-1 the values so its flex-grow is 2, its flex-shrink is 2, and its flex-basis is 150px. Give #box-2 the values so its flex-grow is 1, its flex-shrink is 1, and its flex-basis is 150px. These values will cause #box-1 to grow to fill the extra space at twice the rate of #box-2 when the container is greater than 300px and shrink at twice the rate of #box-2 when the container is less than 300px. 300px is the combined size of the flex-basis values of the two boxes. #box-1 { background-color: dodgerblue; height: 200px; } #box-2 { background-color: orangered;
horizontal
Creating a row using flex direction will align the children
space-evenly:
Distributes space evenly between the flex items with a full space at either end of the flex container
to build a responsive page
Placing the CSS property display: flex; on an element allows you to use other flex properties
row
The default value for the flex-direction property is
flex-start, flex-end, center, streched, baseline
The different values available for align-items include:
numbers as values
The flex-shrink property takes
flex direction property
This makes it possible to align any children of that element into rows or columns. You do this by adding the
