How to achieve horizontal scrolling effect through CSS Flex layout-CSS Tutorial-php.cn

How to achieve horizontal scrolling effect through CSS Flex layout

王林

Release： 2023-09-27 14:05:01

Original

2091 people have browsed it

如何通过Css Flex 弹性布局实现横向滚动效果

How to achieve horizontal scrolling effect through Css Flex elastic layout

Summary:
In web development, sometimes we need to display a series of items in a container , and want the items to scroll horizontally. At this time, you can use CSS Flex elastic layout to achieve the horizontal scrolling effect. We can easily achieve this effect by adjusting the properties of the container with simple CSS code. In this article, I will introduce how to use CSS Flex to achieve a horizontal scrolling effect and provide specific code examples.

CSS Flex Flexible Layout Introduction:
CSS Flex is a layout method developed by W3C, which is a layout model used to arrange and distribute items in containers. By using CSS Flex, we can easily achieve horizontal or vertical arrangement of items, as well as flexible control over the allocation of space between items.

Step 1: Create HTML structure
First, we need to create an HTML structure that contains a container div and the items in the container. The HTML code is as follows:

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 在这里添加更多的项目 -->
</div>

Copy after login

Step 2: Set the CSS Flex property
Next, we need to set the CSS Flex property of the container div to achieve the horizontal scrolling effect. The specific CSS code is as follows:

.container {
  display: flex;
  overflow-x: scroll;
  /* 横向滚动 */
  white-space: nowrap;
  /* 防止项目换行显示 */
}

.item {
  flex: 0 0 auto;
  /* 设置项目为固定宽度 */
  width: 200px;
  /* 设置项目的宽度 */
  margin-right: 10px;
  /* 设置项目之间的间距 */
}

Copy after login

Explanation of CSS code:

display: flex; Set the container to Flex layout.
overflow-x: scroll; Set the scroll bar to appear horizontally in the container.
white-space: nowrap; prevents items from wrapping in another line.
flex: 0 0 auto; Set the item to a fixed width.
width: 200px; Set the width of the item.
margin-right: 10px; Set the spacing between items.

Step 3: Run the effect
Integrate the HTML code and CSS code together and save it as an HTML file. Then open the HTML file in your browser and you will see a container with a horizontal scrolling effect. Using the scroll bar or mouse wheel, you can scroll horizontally through all items.

The complete code example is as follows:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      overflow-x: scroll;
      white-space: nowrap;
    }

    .item {
      flex: 0 0 auto;
      width: 200px;
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <!-- 添加更多项目 -->
  </div>
</body>
</html>

Copy after login

Summary:
By using CSS Flex elastic layout, we can easily achieve the horizontal scrolling effect. By setting the CSS Flex property of the container, we can control the arrangement and spacing of items, and whether scroll bars appear. The above is a simple example that you can customize and extend according to your needs. I hope this article will help you achieve horizontal scrolling effects in web development.

The above is the detailed content of How to achieve horizontal scrolling effect through CSS Flex layout. For more information, please follow other related articles on the PHP Chinese website!