菜单 搜索
首页 前端知识 【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 )

【移动端网页布局】flex 弹性布局 ⑤ ( 设置侧轴单行子元素排列方式 | align-items 样式说明 | 代码示例 )

2024-04-29 12:04:38 前端知识 前端哥 611 618 我要收藏

文章目录

  • 一、设置子元素是否换行 : align-items 样式说明
    • 1、 align-items 样式引入
    • 2、 align-items 样式属性值
  • 二、代码示例
    • 1、 代码示例 - 默认样式
    • 2、 代码示例 - 设置主轴水平居中
    • 3、 代码示例 - 设置侧轴垂直居中
    • 4、 代码示例 - 设置侧轴从下到上排列
    • 5、 代码示例 - 设置侧轴拉伸排列





一、设置子元素是否换行 : align-items 样式说明



1、 align-items 样式引入


在 flex 弹性布局容器 中 , 通过设置 justify-content 属性 , 可以实现主轴方向上水平居中的效果 ;

如果想要设置 垂直居中 效果 , 就是设置 侧轴 的居中对齐效果 ， 就需要为 flex 容器设置 align-items 样式 ;


2、 align-items 样式属性值


align-items 样式属性值 :

  • flex-start , 默认值 , 默认情况下主轴是 从左到右 , 侧轴 从上到下 , 此处设置默认值 , 就是侧轴 从上到下的设置 ;
  • flex-end , 侧轴的元素 从下到上 ;
  • center , 侧轴元素 垂直居中 ;
  • stretch , 侧轴元素 拉伸 ;




二、代码示例



1、 代码示例 - 默认样式


下面的代码只设置了 display: flex; 样式 , 没有设置其它样式 , 作为对比参照 ;


代码示例 :

<!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;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

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

</html>

展示效果 :

在这里插入图片描述


2、 代码示例 - 设置主轴水平居中


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 主轴水平居中 */
            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;
            /* 主轴水平居中 */
            justify-content: center;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

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

</html>

效果展示 :

在这里插入图片描述


3、 代码示例 - 设置侧轴垂直居中


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 设置侧轴垂直居中 */
            align-items: 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;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴垂直居中 */
            align-items: center;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

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

</html>

展示效果 :

在这里插入图片描述


4、 代码示例 - 设置侧轴从下到上排列


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 设置侧轴从下到上排列 */
            align-items: 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;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴从下到上排列 */
            align-items: flex-end;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

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

</html>

展示效果 :

在这里插入图片描述


5、 代码示例 - 设置侧轴拉伸排列


下面的代码在设置了 display: flex; 样式基础上 , 设置了

            /* 设置侧轴拉伸排列 */
            align-items: stretch;

样式 , 令侧轴拉伸排列 ;

注意 , 要把 flex 项目的高度注释掉 , 否则没有任何效果 ;

        div span {
            width: 100px;
            /* 使用 align-items: stretch; 样式不能设置高度 */
            /* height: 100px; */
            background-color: skyblue;
            margin: 10px;
        }

代码示例 :

<!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;
            /* 主轴水平居中 */
            justify-content: center;
            /* 设置侧轴拉伸排列 */
            align-items: stretch;
            /* 布局宽度 500 像素 */
            width: 500px;
            /* 布局高度 500 像素 */
            height: 500px;
            /* 设置背景颜色 */
            background-color: pink;
        }
        
        div span {
            width: 100px;
            /* 使用 align-items: stretch; 样式不能设置高度 */
            /* height: 100px; */
            background-color: skyblue;
            margin: 10px;
        }
    </style>
</head>

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

</html>

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

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

前端哥

前端哥

发布的文章

HTML5本地存储

2024-05-06 09:05:10

HTML入门：07HTML5语义化布局

2024-05-06 09:05:03

HTML5和CSS3新特性

2024-04-16 17:04:36

使用HTML5制作初级的‘音乐排行榜’

2024-05-06 09:05:41

编程笔记 html5&css&js 083 JavaScript 函数的递归

2024-05-06 09:05:41

Jackson 2.x 系列【2】生成器 JsonGenerator

2024-05-06 09:05:25

【python】爬虫基础——JSON、requests、BeautifulSoup、lxml、爬取静态网页

2024-05-06 09:05:15

Java中Json与Json格式字符串的解析、判断和转换

2024-05-06 09:05:14

Java fastJson的maven配置以及下载使用方法及相关文档

2024-05-06 09:05:14

uniapp动态生成pages.json路由

2024-05-06 09:05:07

大家推荐的文章
1

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

2024-04-23 21:04:401000
2

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

2024-04-08 11:04:211000
3

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

2024-03-03 11:03:011000
4

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
5

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
6

移动端css布局大全

2024-02-06 15:02:421000
7

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
8

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
9

vue3的两个提示[Vue warn]: 关于组件渲染和函数外部使用

2024-05-05 22:05:07999
10

vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999

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

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

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

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

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