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>
    1 2 3
    </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>
相关推荐
Never_Satisfied1 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊2 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友2 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao3 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子3 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...3 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪3 小时前
函数组件和异步组件
前端·javascript·面试
淮北4943 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友3 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式
Setsuna_F_Seiei4 小时前
CocosCreator 游戏开发 - 利用 AssetsBundle 技术对小游戏包体积进行优化
前端·cocos creator·游戏开发