display:flex布局，最简单的案例_display:flex 里面怎么写

作者：IT小白 | 2024-08-16 21:54:23

踩

display:flex 里面怎么写

1. 左右贴边


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 800px;
            background: red;
            height: 200px;
            display: flex;
            justify-content: space-between;
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
 
  <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
  </div>
 
</body>
</html>

2.左右不贴边


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 800px;
            background: red;
            height: 200px;
            display: flex;
            justify-content: space-around;
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
 
  <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
  </div>
 
</body>
</html>

3.元素自动换行


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 600px;
            background: red;
            height: 300px;
            display: flex;
            /*flex布局中，默认的子元素是不换行的nowrap， 如果装不开，会缩小子元素的宽度，放到父元素里面*/
            flex-wrap: wrap;/*换行*/
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 5px;
        }
    </style>
</head>
<body>
 
  <div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
      <span>3</span>
 
  </div>
 
</body>
</html>

4.垂直居中


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 600px;
            background: red;
            height: 300px;
            display: flex;
            /*默认的主轴是 x轴 row */
            justify-content: center;
            /*我们需要一个侧轴居中*/
            align-items: center;
        }
        #parent span{
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

5.子元素的高度自适应父元素（拉伸）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #parent{
            width: 600px;
            background: red;
            height: 300px;
            display: flex;
            /*默认的主轴是 x轴 row */
            justify-content: center;
            /*拉伸，但是子盒子不要给高度*/
            align-items:stretch;
        }
        #parent span{
            width: 100px;
            background: yellow;
            margin: 5px;
        }
    </style>
</head>
<body>
<div id="parent">
      <span>1</span>
      <span>2</span>
      <span>3</span>
   </div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/990005