CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景
Flex是Flexible Box的缩写,意为”弹性布局”。
怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列。
实现如下类似布局
最外层是是一个div,div里面是上面一个照片,下面一个表单,这两个元素居中排列。
注:
博客:
霸道流氓气质的博客_CSDN博客-C#,架构之路,SpringBoot领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
1、外层div设置样式
.login {display: flex;flex-direction: column;justify-content: center;align-items: center;
}
2、display: flex; 设置为弹性布局
3、flex-direction属性决定主轴的方向(即项目的排列方向)。
row(默认值):主轴为水平方向,起点在左端。
row-reverse:主轴为水平方向,起点在右端。
column:主轴为垂直方向,起点在上沿。
column-reverse:主轴为垂直方向,起点在下沿。
4、justify-content属性定义了项目在主轴上的对齐方式。
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等。
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5、align-items属性定义项目在交叉轴上如何对齐。
flex-start:交叉轴的起点对齐。
flex-end:交叉轴的终点对齐。
center:交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6、这样设置之后div里面上下两个元素就会居中
但是两个子元素会紧挨在一起,如果要使其有一定距离。
给下面的子元素设置margin-top属性即可
.login-form {margin-top: 100px;
}
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距相关推荐
- HTML+CSS flex弹性布局
flex布局原理 flex是flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局. 当我们为父盒子设置为flex ...
- 详解 CSS3中最好用的布局方式——flex弹性布局(看完就会)
文章包含个人理解,错误请指出. 往期css3文章 CSS3基础属性大全 CSS3动画属性 animation详解(看完就会) CSS3 transform 2D转换之移动 旋转 缩放(详细讲解看完就会 ...
- 移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
- 微信小程序开发(三)——IE盒子,Flex弹性布局,色子六面
目录 ie盒子模型 Flex弹性布局 三大特性: 块元素和内联元素的转换 background-image背景图片 尺寸单位rpx 定位 练习:色子的六面 ie盒子模型 盒子模型是css中一个重要的概 ...
- 移动端基础(2)—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...
- Flex弹性布局属性及属性值
1.什么是Flex 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为 Flex 项目(flex ...
- css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么 发布时间:2020-12-05 13:24:07 来源:亿速云 阅读:102 作者:小新 这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
- flex弹性布局教程-09-容器属性flex-flow
本节目标 掌握flex-flow的使用,flex-flow是flex-direction和flex-wrap的合集. 掌握上左右下的布局编写技巧. 内容摘要 本篇介绍了容器属性 flex-flow,是 ...
- 页面布局 - flex弹性布局
flex弹性布局 html: <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
最新文章
- tf.nn.relu
- 四十八、减少磁盘延迟时间的方法
- mysql rand()产生随机整数范围及方法
- 《麻省理工科技评论》:2018年18大科技趋势,2017年7大失败技术
- 程序计算机限制无法打开,由于一个软件限制策略的阻止,windows无法打开此程序...解决方案参考...
- 【Python刷题】_4
- java 有多少api_Java常用API(二)
- 【性能】模糊查询性能提升
- 探索性数据分析入门_入门指南:R中的探索性数据分析
- 网页静态服务器-3-使用类
- 自然语言处理 —— 2.5 学习词嵌入
- 获取指定域名的IP地址
- Atitit 提升开发效率总结 目录 1. declara dynamic Dsl化 fp script	1 1.1. 各种语法新特性 linq等	2 1.2. duck typing。	2
- IIS6.0PUT漏洞复现
- Exploring and Distilling Posterior and Prior Knowledge for Radiology Report Generation
- 一峰说:SpringCloud的基础了解和使用
- 正则替换非中英文数字 js C#
- 《2016-2017年全球竞争力报告》述评
- 刘寅立matlab数值计算案例分析 pdf,《MATLAB数值计算案例分析》源代码
- 康奈尔笔记法写程序笔记
热门文章
- Python 计算机视觉(一) —— 数字图像处理基础
- rpm安装mysql服务(5.7举例)
- git 为什么会有多个head_继续学习Git
- WINCE的FFMPEG交叉编译环境搭建
- java中的异常种类和区别以及处理机制和区别
- 你有没有觉得邮件发送人固定配置在yml文件中是不妥当的呢?SpringBoot 动态设置邮件发送人
- java用继承编写宠物乐园_MoreThanJavaDay 5:面向对象进阶继承详解
- java checked异常有那些,java checked exceptions
- java 数组参数_java中 数组可以作为形式参数传递到调用的方法中吗?要怎么操作?...
- r语言各形状编号_R语言入门第八讲:编码分类变量(factor)