程序员经验分享-hwhale

常用的几种布局方式---Flex 布局(垂直居中展示）

2023-05-16

常用的几种布局方式---Flex 布局(垂直居中展示）

  • 前言
  • 一、默认使用静态布局
  • 二、flex布局
    • 1.父元素container
    • 1.1.display:flex
    • 1.2.flex-direction属性
    • 1.3.主轴与侧轴
    • 1.4.justify-content属性
    • 1.5.align-items属性
    • 1.6.flex-wrap属性
    • 2.子元素items

前言

怎样让一个元素在垂直或者水平方向居中显示，可以使用css解决，但是会出现不同浏览器的兼容性问题，而flex布局解决了一个父容器和多个子元素的布局问题，从而灵活布局。

一、默认使用静态布局

在这里插入图111片描述

代码展示
在这里插入图片描述

二、flex布局

1.父元素container

在这里插入图片描述

1.1.display:flex

在父标签加入display:flex后

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
}

垂直布局变成水平布局，如下图所示
在这里插入图片描述

1.2.flex-direction属性

在父标签中修改

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
flex-direction:column;
}

后又变成垂直布局
在这里插入图片描述

1.3.主轴与侧轴

先介绍下主轴和交叉轴概念，有些属性只针对主轴生效，部分对交叉轴生效
在这里插入图片描述

1.4.justify-content属性

justify-content用来设置主轴方向上的子元素排列的方式，属性为center时意味居中显示

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
justify-content:center;
}

又变成水平居中显示：
在这里插入图片描述
更改justify-content属性值，justify-content：flex-start后，从起始侧开始排列：
在这里插入图片描述
justify-content：flex-end后，排列在尾部：
在这里插入图片描述
想均匀分割子元素的空间距离，可使用justify-content：space-between;
在这里插入图片描述
justify-content：space-around;
在这里插入图片描述
justify-content：space-evenly;
在这里插入图片描述

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
flex-direction:column;
justify-content:center;
}

注意，此时因为flex-direction:column变成了垂直展示，但是此时垂直方向（从上到下）为主轴，水平方向（自左向右）为交叉轴
修改后变成垂直方向居中显示：
在这里插入图片描述

1.5.align-items属性

align-items:center用来设置交叉轴方向上的子元素排列的方式，属性为center时意味居中显示

.wrap{
height:800px;
border:28px solid antiquewhite;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}

后使交叉轴方向居中显示：
在这里插入图片描述

1.6.flex-wrap属性

当网页缩小到页面不足以容纳元素的排列，使盒子中的元素压缩，失去原来的形状，希望能换行展示，则使用
flex-wrap：wrap;

2.子元素items

在这里插入图片描述

第二个盒子不设定宽度，则盒子宽度就为内容本身宽度
在这里插入图片描述
代码展示
在这里插入图片描述
此时修改代码：

.box-2{
background:darkcyan;
flex-grow:1;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

常用的几种布局方式---Flex 布局(垂直居中展示） 的相关文章

随机推荐

  • 结构体案例2

    设计一个英雄的结构体 xff0c 包括成员姓名 xff0c 年龄 xff0c 性别 xff1b 创建结构体数组 xff0c 数组中存放5名英雄 通过冒泡排序 xff0c 将数组中的英雄按年龄进行升序排列 xff0c 最终打印排序后的结果 i

  • 第二周博客总结

    既然自己选择了学习算法 xff0c 便会一直坚持下去 xff0c 完成自己既定的目标 xff01 这一周下来 xff0c 按照自己既定的计划 xff0c 自己利用课余时间看深入浅出这本书 从第八章的初涉算法一直看到了第十七章的集合 xff0

  • 第四周ACM博客总结

    这一周基本对算法知识进行了一次细致的阅读 xff0c 自己也对算法知识有了更深一步的了解 这一周自己先将上周剩下的一点STL的内容补上了 xff0c 这些容器之间相似的地方有很多 xff0c 但都有各自的优点所在 xff0c 需要结合题目特

  • 第十四周DP算法总结

    这周自己主要再看DP算法的博客 xff0c 感觉DP这一部分内容确实比之前的都要麻烦一些 xff0c 最后攻克这一部分难题还是挺好的 这周自己总结了一些题型 xff0c 以及一些方法思路 xff0c 最后再把动态规划和之前的分治和贪心做一下

  • 深度理解卷积神经网络

    神经网络包括卷积层 xff0c 池化层 xff0c 全连接层 一个最简单的神经元结构 xff0c 假如有三个输入 xff0c 都对应一个权重参数 xff0c 然后通过权重加起来 xff0c 经过一个激活函数 xff0c 最后输出y CNN中

  • 花了半个多小时才发现的错误。。

    找了半天原来该写mapper的地方写成了service 结果光栈溢出 在找错误的过程中发现有些sql语句也写得不对 xff0c 单词拼错的 xff0c 后边多加逗号的 xff0c 某些html语句后边多写逗号的 64 Service pub

  • 找了1个多小时才发现的错误。。

    如果只是跟着课本敲 xff0c 那就肯定报错了 好久没碰有点生疏了 之前敲过一个类似的加载properties的文件的方法 xff0c 直接把课本的这个改成这个就可以解决500的错误了 注释的地方是行不通的错误代码 xff01 xff01

  • 1. Python 的 print( )输出函数

    1 Python 的 print 输出函数 文章目录 1 Python 的 print 输出函数1 什么是print 函数2 print 函数的语法3 英文输入法4 敲下你的第一行代码5 print 函数的4种用法5 1 没有引号5 2 单

  • c语言顺序表的基本操作

    该代码段包含了几种比较常见的顺序表的基本操作 xff0c 有 xff1a 求表长 xff0c 按位取值 xff0c 按值取位 xff0c 插入和删除几种方式 xff1b include lt stdio h gt define listsi

  • c语言单链表的基本操作

    该程序包含了链表的头插法 尾插法 求表长 按位查找 按值查找 插入 删除 销毁等几种操作 xff1b include lt stdio h gt include lt stdlib h gt malloc和free都需要这个系统库函数头文件

  • 文件操作（结构体）

    将结构体内容写入到文件中 include lt stdio h gt include lt string h gt struct student char name 100 int age int main struct student s

  • c语言顺序栈的基本操作

    该程序包含了顺序栈的置空 判断是否为空 判断是否为满 入栈 出栈和取栈顶元素等几种操作 xff1b include lt stdio h gt define size 100 typedef int datatype 假定栈元素的类型为in

  • c语言循环队列的基本操作

    该程序包含了置空 xff0c 判断是否为空 xff0c 入队 xff0c 出队 xff0c 取对头元素等几个基本操作 xff1b include lt stdio h gt include lt stdlib h gt malooc需要的头

  • c语言链队的基本操作

    该程序包含了链队的置空 判断是否为空 入栈 出栈和取栈顶元素几种基本操作 include lt stdio h gt include lt stdlib h gt malloc和free都需要这个系统库函数头文件 xff1b typedef

  • 十进制纯小数M转化成B进制数小数

    通过使用循环队列的方式将十进制纯小数M转化成B进制数 xff1b include lt stdio h gt include lt stdlib h gt malloc需要的头文件 xff1b define size 100 typedef

  • 十进制整数N转化成B进制整数

    通过使用顺序栈的方式将十进制整数N转化成B进制整数 xff1b include lt stdio h gt include lt stdlib h gt define size 100 typedef struct int data siz

  • redhat8安装ansible，Redhat8版本太低

    ansible因为更新的原因要安装Python3 9 Redhat8自带Python版本太低 耗费了一个多星期才解决 关闭防火墙和selinux 1 systemctl status firewalld 2 systemctl stop f

  • 从键盘输入10个整数，编程实现将其中最大数与最小数的位置对换后，再输出调整后的数组

    include lt stdio h gt void main int t 10 temp i max min max 61 0 min 61 0 for i 61 0 i lt 10 i 43 43 scanf 34 d 34 amp t

  • 枚举类型详解

    对于枚举类型 xff0c 想必不少的读者 xff0c 也是听过 xff0c 但是 xff0c 却没怎么见过如何使用 xff01 xff01 所以 xff0c 笔者打算用这一篇博客 xff0c 来详细的讲解一下 xff0c 枚举 xff01

  • 常用的几种布局方式---Flex 布局(垂直居中展示）

    常用的几种布局方式 Flex 布局 垂直居中展示 xff09 前言一 默认使用静态布局二 flex布局 1 父元素container1 1 display flex1 2 flex direction属性1 3 主轴与侧轴1 4 justi

热门标签