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

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

2024-05-24 08:05:58 前端知识 前端哥 139 159 我要收藏

文章目录

  • 一、设置主轴子元素排列方式 : justify-content 样式说明
  • 二、代码示例
    • 1、代码示例 - 子元素从头部开始排列
    • 2、代码示例 - 子元素从尾部开始排列
    • 3、代码示例 - 子元素在主轴方向上居中对齐
    • 4、代码示例 - 子元素平均分配剩余空间
    • 5、代码示例 - 两侧的子元素贴两边 / 其它元素平分剩余空间





一、设置主轴子元素排列方式 : 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>

展示效果 :
在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/9232.html
标签
justify-content移动端网页布局flex弹性布局
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么？如何使用？

2024-03-12 01:03:24

大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html jquery bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

2024-02-06 15:02:03

JavaWeb Jquery 完成图片表单数据上传，Java之内存泄漏调试学习与总结

2024-05-30 10:05:14

jQuery 上部分--头歌（educoder)实训作业题目及答案

2024-05-30 10:05:14

js延迟加载的六种方式

2024-05-30 10:05:51

1.electron之纯原生js/jquery的桌面应用程序（基础篇）

2024-05-30 10:05:25

SVG preserveAspectRatio 终极理解

2024-05-30 10:05:02

Antv X6.js 内容居中相关问题

2024-05-30 10:05:59

大家推荐的文章
1

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
2

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
3

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
4

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
5

UE4.27支持HTML5

2024-05-07 13:05:261000
6

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000
7

js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000
8

jQuery事件处理

2024-03-12 01:03:321000
9

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000
10

ECharts 饼状图颜色设置

2024-02-16 14:02:001000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！