移动端网页布局flex 弹性布局 ③ ( 设置主轴子元素排列方式 | justify-content 样式说明 | 子元素从头部开始排列 | 子元素从尾部开始排列 | 居对齐 | 平均分配 )

韩曙亮

2024-04-23 帮助1人

一、设置主轴子元素排列方式 : justify-content 样式说明

justify-content 样式用于设置主轴子元素排列方式 ; 使用该样式前 , 务必先设定主轴方向 ;

justify-content 样式属性值说明 :

flex-start , 默认值 , 默认子元素从头部开始排列 ;
- 如果主轴方向是从左到右 row 方向 , 则子元素从左到右排列 ;
- 如果主轴方向是从右到左 row-reverse 方向 , 则子元素从右到左排列 ;
flex-end , 子元素从尾部开始排列 ;
- 如果主轴方向是从左到右 row 方向 , 则子元素从右到左排列 ;
- 如果主轴方向是从右到左 row-reverse 方向 , 则子元素从左到右排列 ;
center , 子元素在主轴方向上居中对齐 ;
space-around , 平分剩余空间 ;
space-between , 两侧的子元素贴两边 , 其它元素平分剩余空间 ;
- 设置父容器中左右两边的子元素盒子贴父容器的左右两侧 , 中间的盒子居中对齐 ;

二、代码示例

1、代码示例 - 子元素从头部开始排列

核心代码 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 从头部开始 排列 默认值 */
            justify-content: flex-start;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 从头部开始 排列 默认值 */
            justify-content: flex-start;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

展示效果 :
学新通

2、代码示例 - 子元素从尾部开始排列

核心代码 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 从尾部开始 排列 */
            justify-content: flex-end;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 从尾部开始 排列 */
            justify-content: flex-end;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

展示效果 :
学新通

3、代码示例 - 子元素在主轴方向上居中对齐

核心代码 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 在主轴方向上 居中对齐 */
            justify-content: center;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 在主轴方向上 居中对齐 */
            justify-content: center;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

展示效果 :

学新通

4、代码示例 - 子元素平均分配剩余空间

核心代码 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 子元素平均分配 剩余空间 */
            justify-content: space-around;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 子元素平均分配 剩余空间 */
            justify-content: space-around;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 5px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

展示效果 :
学新通

5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间

核心代码 :

            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 两侧的子元素贴两边 , 其它元素平分 剩余空间 */
            justify-content: space-between;

代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex 弹性布局</title>
    <style>
        div {
            /* 将展示样式设置为 flex 即可启用弹性布局 */
            display: flex;
            /* 将主轴设置为 从左到右 默认值 */
            flex-direction: row;
            /* 子元素 两侧的子元素贴两边 , 其它元素平分 剩余空间 */
            justify-content: space-between;
            /* 布局宽度充满整个 浏览器 / 设备 */
            width: 100%;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
</body>

</html>

展示效果 :
学新通

这篇好文章是转载于：学新通技术网

移动端网页布局flex 弹性布局 ③ ( 设置主轴子元素排列方式 | justify-content 样式说明 | 子元素从头部开始排列 | 子元素从尾部开始排列 | 居对齐 | 平均分配 )

一、设置主轴子元素排列方式 : justify-content 样式说明

二、代码示例

1、代码示例 - 子元素从头部开始排列

2、代码示例 - 子元素从尾部开始排列

3、代码示例 - 子元素在主轴方向上居中对齐

4、代码示例 - 子元素平均分配剩余空间

5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

word里面弄一个表格后上面的标题会跑到下面怎么办

《学习通》视频自动暂停处理方法

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐