HTML tutorial: How to use Flexbox for horizontal distribution-HTML Tutorial-php.cn

HTML tutorial: How to use Flexbox for horizontal distribution

PHPz

Release： 2023-10-16 09:39:23

Original

1030 people have browsed it

HTML tutorial: How to use Flexbox for horizontal distribution

HTML tutorial: How to use Flexbox for horizontal and equal distribution

In modern web development, flexible and adaptive layout is an important part. Flexbox (flexible layout) is a layout model introduced in CSS3 that provides a simple and powerful way to create flexible container and sub-item layouts. In this tutorial, we will learn how to use Flexbox to achieve horizontal equal distribution.

1. Create a basic HTML structure

First, we need to create a basic HTML structure. In the body tag, we create a container with several sub-items. Each child item will collectively occupy the width of the container and will be distributed horizontally.

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Flexbox水平等分布局</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">子项目 1</div>
    <div class="item">子项目 2</div>
    <div class="item">子项目 3</div>
    <div class="item">子项目 4</div>
  </div>
</body>
</html>

Copy after login

2. Add styles

Next, we need to add a style sheet (styles.css) to the HTML file and set the Flexbox layout in it.

.container {
  display: flex; /* 将容器设置为Flex布局 */
  justify-content: space-between; /* 控制子项目的水平分布方式 */
  width: 100%; /* 设置容器宽度为100% */
}

.item {
  width: 25%; /* 将每个子项目的宽度设置为25% */
  background-color: #ccc;
  padding: 20px;
}

Copy after login

In the above code, we set the container to Flex layout through display: flex. Then, use justify-content: space-between to specify how the sub-items should be distributed horizontally, which will preserve equal spacing between each sub-item. Finally, we set the width of each sub-item to 25% to achieve equal distribution horizontally.

3. Run the code

Open the HTML file in the browser, you will see that the sub-projects have been distributed horizontally in the container. There is equal spacing between each sub-item and the width is also equal.

4. Extending the layout

Using Flexbox, you can easily extend the layout. For example, if you want to add more sub-items, simply add more <div class="item">...</div> in the container.

<div class="container">
  <div class="item">子项目 1</div>
  <div class="item">子项目 2</div>
  <div class="item">子项目 3</div>
  <div class="item">子项目 4</div>
  <div class="item">子项目 5</div>
  <div class="item">子项目 6</div>
</div>

Copy after login

In this way, new sub-projects will automatically be distributed horizontally and equally in the container.

Conclusion

By using Flexbox, we can easily achieve a horizontally distributed layout. Flexbox is a simple and powerful layout method that can adapt to various screen sizes and device types, providing us with more flexible layout options. I hope this tutorial is helpful to you, give it a try!

The above is the detailed content of HTML tutorial: How to use Flexbox for horizontal distribution. For more information, please follow other related articles on the PHP Chinese website!