How to use the flex attribute of CSS3 to achieve adaptive effect of web page layout?-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to use the flex attribute of CSS3 to achieve adaptive effect of web page layout?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 09, 2023 pm 05:00 PM

cssflex propertyAdaptive effect

How to use the flex attribute of CSS3 to achieve adaptive effect of web page layout?

How to use the flex attribute of CSS3 to achieve the adaptive effect of web page layout

In front-end development, the adaptability of web page layout has always been an important issue. With the advent of CSS3, using the flex property became a popular solution. In this article, we will introduce how to use the flex property of CSS3 to achieve adaptive effects in web page layout.

1. Understanding flex layout

Before we begin, we need to understand the basic concepts of flex layout. Flex layout is a concept based on containers and items. It controls the layout of items within the container by setting the properties of the container.

Container properties:

display: flex; Set the container to flex layout.
flex-direction: row | column; Set the arrangement direction of items, row means horizontal arrangement, and column means vertical arrangement.
justify-content: flex-start | flex-end | center | space-between | space-around; Set the alignment of the item on the main axis.
align-items: flex-start | flex-end | center | baseline | stretch; Set the alignment of items on the cross axis.
flex-wrap: nowrap | wrap | wrap-reverse; Set whether the item wraps.

Project properties:

flex-grow: value; Set the magnification ratio of the project, the default is 0, that is, no magnification.
flex-shrink: Value; Set the shrinkage ratio of the item. The default is 1, which means it can be shrunk.
flex-basis: auto | value; Set the initial length of the item, the default is auto.
flex: flex-grow flex-shrink flex-basis; Shorthand for setting the flex property of the item.

2. Achieving the adaptive effect of web page layout

Below we use a simple example to demonstrate how to use the flex attribute of CSS3 to achieve the adaptive effect of web page layout.

html code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Flex布局自适应演示</title>
  <link rel="stylesheet" type="text/css" href="flex.css">
</head>
<body>
  <div class="container">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
  </div>
</body>
</html>

css code:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
}

.item {
  flex: 1;
  text-align: center;
  border: 1px solid #000;
  padding: 20px;
}

In this example, we create a container div and set it to flex layout. The container's height is set to 500px, and the item's flex property is set to 1, which divides the remaining space equally. This way, no matter how the width of the container changes, the items will automatically adapt.

We can observe the effect by opening this webpage in a browser and adjusting the size of the window. No matter how the width of the window changes, the items are automatically centered and bisect the remaining space.

3. Summary

Using the flex attribute of CSS3 can easily achieve the adaptive effect of web page layout. By setting the properties of the container and the properties of the items, we can flexibly control how the items are laid out within the container. In actual development, we can flexibly use flex layout according to needs to achieve various complex web page layout effects.

The above is the detailed content of How to use the flex attribute of CSS3 to achieve adaptive effect of web page layout?. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn