CSS3Basic Tutorial

CSS3 Filters(Filters)CSS3 box-sizing(box-sizing)

CSS3 Flexible Box Layout

CSS3 flexible Box or flexbox is a new layout model used to create more flexible user interface designs.

Understanding Flexbox Layout Model

Flexible box, commonly referred to as flexbox, is a CSS3A new layout model introduced in CSS, used to create flexible user interface designs with multiple rows and columns without using percentage or fixed length values.3 The flexbox layout model provides a simple yet powerful mechanism for automatically handling space distribution and content alignment through stylesheets, without interfering with the actual markup.

This example demonstrates how to create a three-column layout using the flexbox layout model, where each column has equal width and height.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3　Three　Equal　Flex　Column</title>
<style>
　　　　.flex-container　{
　　　　　　　　width:　80%;
　　　　　　　　min-height:　300px;
　　　　　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　　　　　display:　flex;　
　　　　　　　　border:　1px　solid　#808080;
　　　　}
　　　　.flex-container div {
　　　　　　　　background:　#dbdfe5;
　　　　　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　　　　　-ms-flex:　1;　/*　IE　10　*/
　　　　　　　　flex:　1;　
　　　　}
</style>
</head>Item　1Item　2Item　3</html>

Test and see‹/›

If you pay close attention to the above example code, you will find that we did not use the .flex-inside the container<div>Any width can be specified on the top, but as you can see in the output, the width of each column is exactly equal to the parent element.flex-container one-third.

How Flex layout works

Flexbox consists of Flex containers and Flex items. You can control the direction of the flow within a Flex container bydisplayelements set the attribute to flex (generateblock-level Flex container) or inline-flex (generate similar toinline-blockto create a Flex container. All child elements of the flex container will automatically become flex items and be laid out using the flex layout model. Thefloat,clearandvertical-alignproperties have no effect on the elastic items.

The伸缩项 along thisflex-directionThe flex line specified by the property is located inside the flex container. By default, each flex container has only one flex line, which is in the direction of the inline axis orthe same as the text direction.The following figure will help you understand the terms of Flex layout.

specifying the flow inside the Flex container

In the standard CSS box model, elements are usually displayed in the order they appear in the underlying HTML markup. Flex layout allows you to control the direction of the flow within a Flex container, so that elements can be laid out in any flow direction such as left, right, down, or even up.

You can useflex-directionThe direction property specifies the flow of flex items in the flex container. The default value of row is the same as the current writing mode or text direction of the document, for example, English from left to right.

Example

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: row-reverse;
　　　　
　　　　display:　flex;
　　　　flex-direction: row-reverse;
　　　　border:　1px　solid　#666;
}

Test and see‹/›

Similarly, you can display elastic items in a column form within the elastic container instead of using flex-The value of the direction property is listed as follows:

Example

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-direction: column;
　　　　
　　　　display:　flex;
　　　　flex-direction: column;
}

Test and see‹/›

controlling the size of the伸缩项

The most important aspect of elastic layout is the ability of elastic items to change their width or height to fill the available space. This is achieved throughfleximplemented by the property. This is a shorthand propertyflex-grow,flex-shrinkwhileflex-basisProperties.

The elastic container distributes the available space proportionally to its items, or shrinks them to prevent overflow, in proportion to their bending shrinkage coefficient.

Example

.flex-container　{
　　　　width:　80%;
　　　　min-height:　300px;
　　　　display:　-webkit-flex;　/*　Safari　*/　　　　　
　　　　display:　flex;　
}
.flex-container div {
　　　　padding:　10px;
　　　　background:　#dbdfe5;
}
.item1,　.item3　{
　　　　-webkit-flex:　1;　/*　Safari　*/
　　　　flex:　1;　
}
.item2　{
　　　　-webkit-flex:　2;　/*　Safari　*/
　　　　flex:　2;　
}

Test and see‹/›

In the above example, the first and third flexible items will occupy1/4i.e.,1/(1+1+2) of free space, while the second flexible item will occupy1/2i.e.,2/(1+1+2of free space. Similarly, you can use this simple technique to create other flexible layouts.

Note:It is strongly recommended to use shorthand properties instead of individual flex properties, as it can correctly reset unspecified components.

Align Flex items in the Flex container

There are four propertiesjustify-content,align-content,align-itemsandalign-selfThe purpose is to specify the alignment of flexible items within the flexible container. The first three apply to flex containers, while the last one applies to a single flex item.

to align Flex items along the main axis

Use justify-The content property can align the flexible items along the main axis of the flexible container (i.e., horizontally). It is usually used when the flexible items do not use all the available space on the main axis.

justify-The content property accepts the following values:

flex-start-Default value. The flexible items are placed at the start of the main axis.
flex-end -The Flex item is located at the end of the main axis.
center　　- The Flex items are placed in the center of the main axis, with an equal amount of free space at both ends. If the remaining free space is negative, meaning the items overflow, the flexible items will overflow equally in both directions.
space-between　-The Flex items are evenly distributed along the main axis, with the first item placed at the main start edge and the last one placed at the main end. If the items overflow or there is only one item, this value equals flex-start.
space-around　-Flex items are evenly distributed at both ends with half the size of the space. If they overflow or there is only one item, this value equals center.

The following examples will show you different justify-content property has an effect on the multi-column flex container with fixed widths.

Example

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-justify-content: space-around;
　　　　
　　　　display:　flex;
　　　　justify-content: space-around;
}
.item1　{
　　　　width:　75px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　background: #2f97ff;
}

Test and see‹/›

to align Flex items along the horizontal axis

align can be used-items or align-self property aligns the Flex items along the horizontal axis of the Flex container (i.e., the vertical direction). However, when using align-items when applied to a flex container, this align-The self property applies to a single flex item and overrides align-items. Both of these properties accept the following values:

flex-start — The Flex item is located at the start of the cross axis.
flex-end — The Flex item is located at the end of the cross axis.
center　— The flexible items are placed at the center of the horizontal axis, with equal available space at both ends. If the remaining free space is negative, meaning the items overflow, the flexible items will overflow equally in both directions.
baseline　— The text baseline (or inline axis) of each flexible item aligns with the baseline of the largest flexible item.font-size.
Stretch —Stretching items to fill the current row or column unless prevented by minimum and maximum width or height. align-The default value of the items property.

The following examples will show you different align-The items property value has an effect on multi-column flex containers with fixed height.

Example

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-align-items: center;
　　　　
　　　　display:　flex;
　　　　align-items: center;
}
.item1　{
　　　　width:　75px;
　　　　height:　100px;
　　　　background: #e84d51;
}
.item2　{
　　　　width:　125px;
　　　　height:　200px;
　　　　background: #7ed636;
}
.item3　{
　　　　width:　175px;
　　　　height:　150px;
　　　　background: #2f97ff;
}

Test and see‹/›

You can also distribute the available space on the cross axis of multi-line or multi-column flex containers. The property align-content is used to align the rows of flex containers, for example, if there is extra space on the cross axis, then the rows in the multi-line flex container will justify-content alignment is similar to aligning a single item to the main axis.

The align-The content property accepts the same value as justify-content, but applies it to the cross axis instead of the main axis. It also accepts another value:

StretchAvailable space is evenly distributed between all rows or columns to increase its cross size. If the remaining free space is negative, this value equals flex-start.

The following examples will show you different align-The effect of the content property value on multi-line flex containers with fixed height.

Example

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　margin: 0 auto;
　　　　font-size:　32px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-flow: row wrap;
　　　　-webkit-align-content: space-around;
　　　　
　　　　display:　flex;
　　　　flex-flow: row wrap;
　　　　align-content: space-around;
}
.flex-container div {
　　　　width:　150px;
　　　　height:　100px;
　　　　background:　#dbdfe5;
}

Test and see‹/›

Reordering individual Flex items

In addition to changing the flow within the flex container, you can also change the useorderThe order property displays the order of a single flex item. This property accepts positive or negative integers as values. By default, all flex items are displayed and laid out in the order they appear in the HTML markup, because the default value of order is 0.

The following examples will show you how to specify the order of a single elastic item.

Example

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;
}
.flex-container div {
　　　　padding:　10px;
　　　　width:　130px;
}
.item1　{
　　　　background: #e84d51;
　　　　-webkit-order:　2;　/*　Safari　6.1+　*/
　　　　order:　2;
}
.item2　{
　　　　background: #7ed636;
　　　　-webkit-order:　1;　/*　Safari　6.1+　*/
　　　　order:　1;
}
.item3　{
　　　　background: #2f97ff;
　　　　-webkit-order:　-1;　/*　Safari　6.1+　*/
　　　　order:　-1;
}

Test and see‹/›

Note:Items with the lowest order value are placed at the front, and items with the highest order value are placed at the end. Items with the same order value are displayed in the order they appear in the source document.

Flexbox horizontal and vertical center alignment

Generally, vertical alignment of content blocks involves using JavaScript or some primitive CSS tricks. However, flexbox can easily perform this operation without any adjustments.

The following examples will show you how to use CSS3The flexible box feature allows easy vertical and horizontal alignment of content blocks in the middle.

Example

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　display:　-webkit-flex;　/*　Safari　6.1+　*/
　　　　display:　flex;　
}
.item {
　　　　width:　300px;
　　　　padding:　25px;
　　　　margin: auto;
　　　　background: #f0e68c;
}

Test and see‹/›

Enable elastic project line break

By default, the flex container only displays a single or single column of flex items. Butflex-wrapIf there is not enough space on a flex line, you can use the properties on the flex container to specify whether its flex items should wrap into multiple lines.

This flex-The wrap property accepts the following values:

nowrap-Default value. Flex items are placed in a single line. If there is not enough space on the flex line, it may cause overflow.
wrap — The flex container breaks its flex items into multiple lines, similar to how text is wrapped to a new line when it is too wide to fit in the current line.
wrap-reverse — The flex items will wrap when necessary, but in reverse order, that is,cross-start(cross-start)andcross-end(cross-end)The directions will be swapped.

The following examples will show you how to use flex-The wrap property displays flex items in a single or multiple lines within a flex container.

Example

.flex-container　{
　　　　width:　500px;
　　　　min-height:　300px;
　　　　border:　1px　solid　#666;
　　　　/*　Safari　*/
　　　　display:　-webkit-flex;
　　　　-webkit-flex-wrap:　wrap;
　　　　
　　　　display:　flex;
　　　　flex-wrap:　wrap;　　
}
.flex-container　div{
　　　　width:　130px;
　　　　padding:　10px;　　　　
　　　　background:　#dbdfe5;
}

Test and see‹/›

Note:You can also use shorthand CSS properties in a single declaration.flex-flowSet flex-direction and flex-wrap. It accepts values in the same order as each property, and the values can be in any order.

CSS3 Filters(Filters)CSS3 box-sizing(box-sizing)