搞定flex布局

这几种方式的搭配使用可以轻松搞定 PC 端页面的常见需求，比如实现水平居中可以使用 

margin: 0 auto
，实现水平垂直同时居中可以如下设置： 

.dad {position: relative;
}
.son {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
}
.dad {position: relative;
}
.son {width: 100px;height: 100px;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;
}

然而，这些写法都存在一些缺陷：缺少语义并且不够灵活。我们需要的是通过 1 个属性就能优雅的实现子元素居中或均匀分布，甚至可以随着窗口缩放自动适应。在这样的需求下，CSS 的第 4 种布局方式诞生了，这就是我们今天要重点介绍的 flex 布局。

flex 基本概念

使用 flex 布局首先要设置父容器 

display: flex
，然后再设置  
justify-content: center
 实现水平居中，最后设置  
align-items: center
 实现垂直居中。 

#dad {display: flex;justify-content: center;align-items: center
}

先从两个基本概念说起

lex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴，可以说 flex 布局的全部特性都构建在这两个概念上。flex 布局涉及到 12 个 CSS 属性（不含 
display: flex
），其中父容器、子容器各 6 个。不过常用的属性只有 4 个，父容器、子容器各 2 个，我们就先从常用的说起吧。

1. 容器

  • 容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。

1.1 父容器

  • 设置子容器沿主轴排列：justify-content

justify-content
 属性用于定义如何沿着主轴方向排列子容器。

flex-start：起始端对齐

 

flex-end：末尾段对齐

center：居中对齐

space-around：子容器沿主轴均匀分布，位于首尾两端的子容器到父容器的距离是子容器间距的一半。

space-between：子容器沿主轴均匀分布，位于首尾两端的子容器与父容器相切。

  • 设置子容器如何沿交叉轴排列：align-items

align-items
 属性用于定义如何沿着交叉轴方向分配子容器的间距。

flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

baseline：基线对齐，这里的 

baseline
 默认是指首行文字，即 
first baseline
，所有子容器向基线对齐，交叉轴起点到元素基线距离最大的子容器将会与交叉轴起始端相切以确定基线。

stretch：子容器沿交叉轴方向的尺寸拉伸至与父容器一致。

1.2 子容器

  • 在主轴上如何伸缩：flex

子容器是有弹性的（flex 即弹性），它们会自动填充剩余空间，子容器的伸缩比例由 

flex
属性确定。

flex
的值可以是无单位数字（如：1, 2, 3），也可以是有单位数字（如：15px，30px，60px），还可以是 
none
 关键字。子容器会按照 
flex
定义的尺寸比例自动伸缩，如果取值为 
none
则不伸缩。

虽然 

flex
是多个属性的缩写，允许 1 - 3 个值连用，但通常用 1 个值就可以满足需求，它的全部写法可参考下图。

  • 单独设置子容器如何沿交叉轴排列：align-self
每个子容器也可以单独定义沿交叉轴排列的方式，此属性的可选值与父容器  
align-items
 属性完全一致，如果两者同时设置则以子容器的  
align-self
 属性为准。
flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

baseline：基线对齐

 

stretch：拉伸对齐

2. 轴

如图所示， 轴 包括 主轴 和 交叉轴，我们知道 
justify-content
属性决定子容器沿主轴的排列方式， 
align-items
属性决定子容器沿着交叉轴的排列方式。那么轴本身又是怎样确定的呢？在 flex 布局中， 
flex-direction
属性决定主轴的方向，交叉轴的方向由主轴确定。

  • 主轴

 

主轴的起始端由 

flex-start
 表示，末尾段由 
flex-end
 表示。不同的主轴方向对应的起始端、末尾段的位置也不相同。

向右：

flex-direction: row

向下：

flex-direction: column

向左：

flex-direction: row-reverse

向上：

flex-direction: column-reverse

  • 交叉轴

 

主轴沿逆时针方向旋转 90° 就得到了交叉轴，交叉轴的起始端和末尾段也由 

flex-start
和 
flex-end
表示。

上面介绍的几项属性是 flex 布局中最常用到的部分，一般来说可以满足大多数需求，如果实现复杂的布局还需要深入了解更多的属性。

 

flex 进阶概念

1. 父容器

  • 设置换行方式：flex-wrap
　　决定子容器是否换行排列，不但可以顺序换行而且支持逆序换行。
nowrap：不换行
wrap：换行

　　

 

wrap-reverse：逆序换行

逆序换行是指沿着交叉轴的反方向换行。

 

 

  • 轴向与换行组合设置：flex-flow

flow 即流向，也就是子容器沿着哪个方向流动，流动到终点是否允许换行，比如 

flex-flow: row wrap
，
flex-flow
是一个复合属性，相当于 flex-direction 与 flex-wrap 的组合，可选的取值如下：

    • row
      、
      column
      等，可单独设置主轴方向

    • wrap
      、
      nowrap
      等，可单独设置换行方式

    • row nowrap
      、
      column wrap
      等，也可两者同时设置

  • 多行沿交叉轴对齐：align-content

当子容器多行排列时，设置行与行之间的对齐方式。

 

flex-start：起始端对齐

flex-end：末尾段对齐

center：居中对齐

space-around：等边距均匀分布

space-between：等间距均匀分布

stretch：拉伸对齐

2. 子容器

  • 设置基准大小：flex-basis

flex-basis
 表示在不伸缩的情况下子容器的原始尺寸。主轴为横向时代表宽度，主轴为纵向时代表高度。

 

  • 设置扩展比例：flex-grow

子容器弹性伸展的比例。如图，剩余空间按 1:2 的比例分配给子容器。

/

 

  • 设置收缩比例：flex-shrink

子容器弹性收缩的比例。如图，超出的部分按 1:2 的比例从给子容器中减去。

 

  • 设置排列顺序：order

改变子容器的排列顺序，覆盖 HTML 代码中的顺序，默认值为 0，可以为负值，数值越小排列越靠前

 

以上就是 flex 布局的全部属性，一共 12 个，父容器、子容器各 6 个，可以随时通过下图进行回顾。

 

 

 

 

 

 


作者：osimly
链接：https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/370014.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java基础5一数组的常见应用算法

Java基础5一数组的常见应用算法

常用算法 1.冒泡排序: 原理&#xff1a;比较两个相邻的元素&#xff0c;将值大的元素交换至右端 示例: public static void bubbleSort(int[] a) {int n a.length;//总共进行n-1轮的比较for (int i 1; i < n; i) {for (int j 0; j < n - i; j) {if (a[j] > a[j 1]…
阅读更多...
使用Xtend构建Vaadin UI

使用Xtend构建Vaadin UI

今天&#xff0c;我决定向Xtend打个招呼。 我希望学习一些新的编程语言。 选择一个标准的清单并不多。 它必须是在JVM上运行的编程语言&#xff0c; 如果我不需要学习用于建筑应用的全新生态系统&#xff0c;那就太好了。 我已经检查了几个选项。 JVM的编程语言列表已不多了…
阅读更多...
python 浏览器显示本地文件夹_浏览器读取本地文件

python 浏览器显示本地文件夹_浏览器读取本地文件

{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],"search_count":[{"count_phone":4,"count":4}]},"card":[{"des":"阿里云文件存储NAS是一个可共享访问&#xf…
阅读更多...
p15页

p15页

给你一个n*n的01矩阵&#xff0c;只能够将0变成1&#xff0c;使得每个元素上下左右之和均是偶数&#xff0c; 比如 0 0 0 0 1 0 1 0 0>>>>1 0 1 0 0 0 0 1 0 一个转变了3步 多实例T 然后一个n&#xff08;n<15&#xff09; 表示n*n的矩阵 …
阅读更多...
html 登陆sql server,jsp实现注册与登录页面+sqlsever2008

html 登陆sql server,jsp实现注册与登录页面+sqlsever2008

//index.jspString path request.getContextPath();String basePath request.getScheme()"://"request.getServerName()":"request.getServerPort()path"/";%>登陆用户登陆用户名&#xff1a;密 码:注册新用户//Logon.jspString path req…
阅读更多...
百度前端学院-基础学院-第四课

百度前端学院-基础学院-第四课

今天是第四天&#xff0c;进度可以&#xff0c;表扬一下自己。 今天的课程目标是&#xff1a;掌握 CSS 稍微复杂的一些选择器&#xff0c;还有背景&#xff0c;边框等一些 CSS 样式属性。 CSS背景&#xff1a; 背景色&#xff1a;background-color:gray; 背景图&#xff1a…
阅读更多...
JUnit测试方法订购

JUnit测试方法订购

直到4.10版为止的Junit都使用反射API返回的测试类中测试方法的顺序作为测试方法执行的顺序– Class.getMethods&#xff08;&#xff09; 。 引用getMethods&#xff08;&#xff09;api的Javadoc&#xff1a; 返回的数组中的元素未排序&#xff0c;并且没有任何特定顺序。 …
阅读更多...
html中padding和margin的区别和用法与存在的bug消除

html中padding和margin的区别和用法与存在的bug消除

关于margin&#xff1a;在需要border外侧添加距离时。空白处不需要背景时。相连的两个部分的地方需要加外边的边距时使用。 关于padding&#xff1a;在需要border内侧添加距离时。空白处需要背景时。相连的两个部分的地方需要加内部的边距时使用。 IE6中双边距Bug&#xff1a; …
阅读更多...
python发微信提醒天气冷了注意保暖_2019天气变冷的朋友圈说说 注意保暖的微信问候语...

python发微信提醒天气冷了注意保暖_2019天气变冷的朋友圈说说 注意保暖的微信问候语...

1.天冷了&#xff0c;注意添加衣物&#xff0c;别着凉。可你还是着凉了。看你难受的样子&#xff0c;我的心&#xff0c;唉&#xff0c;只有一句话能表达&#xff1a;小样&#xff0c;你也有今天&#xff01;为了不让我得逞&#xff0c;你要注意身体哦。2.天气变凉要注意&#…
阅读更多...
Fiddler抓包使用教程-QuickExec

Fiddler抓包使用教程-QuickExec

转载请标明出处&#xff1a;http://blog.csdn.net/zhaoyanjun6/article/details/73468287 本文出自【赵彦军的博客】 在 Fiddler 中自带了一个 QuickExec 命令行&#xff0c;用户可以直接输入并快速执行脚本命令。 常见命令 help 打开官方的使用页面介绍&#xff0c;所有的命令…
阅读更多...
自己整理的css3动画库，附下载链接

自己整理的css3动画库，附下载链接

动画调用语法 animation: bounceIn 0.3s ease 0.2s 1 both; 按顺序解释参数&#xff1a; 动画名称 如&#xff1a;bounceIn 一周期所用时间 如&#xff1a;0.3s 速度曲线 如&#xff1a;ease 值 描述 linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始&#xff0…
阅读更多...
带有Spring的REST的ETag

带有Spring的REST的ETag

1.概述 本文将重点介绍ETags-Spring支持&#xff0c;RESTful API的集成测试以及带有curl的使用场景。 这是关于使用Spring 3.1和Spring Security 3.1和基于Java的配置来建立安全的RESTful Web服务的系列文章的第9篇。 REST with Spring系列&#xff1a; 第1部分 – 使用Spring…
阅读更多...
html5与css3都要学吗,前端要学css3吗？

html5与css3都要学吗,前端要学css3吗？

前端要学css3&#xff1b;HTML5、CSS3是前端工程师必须要学会。现在移动端的兴起&#xff0c;导致web前端开发的技术逐变向css3和html5转变&#xff0c;所以css3一定要学。CSS3是CSS(层叠样式表)技术的升级版本&#xff0c;于1999年开始制订&#xff0c;2001年5月23日W3C完成了…
阅读更多...
PHP中cookie和session的区别

PHP中cookie和session的区别

1、cookie数据存放在客户的浏览器上&#xff0c;session数据放在服务器上。 2、cookie不是很安全&#xff0c;别人可以分析存放在本地的COOKIE并进行COOKIE欺骗考虑到安全应当使用session。 3、session会在一定时间内保存在服务器上。当访问增多&#xff0c;会比较占用你服务器…
阅读更多...
ubuntu下anaconda3+pygame

ubuntu下anaconda3+pygame

有是很无语的地方&#xff0c;网上教程一堆&#xff0c;又是要下载什么包&#xff0c;然后又是什么依赖乱七八糟的整一堆。都不知道怎么想的 试了 sudo apt-get install python-pygame 这个是行不通的&#xff01;&#xff01;&#xff01;根本没有任何卵用 害我捯饬了半天&am…
阅读更多...
react 判断图片是否加载完成_React中型项目的优化实践

react 判断图片是否加载完成_React中型项目的优化实践

项目介绍整个项目大概有60个页面&#xff0c;用到的组件大概150&#xff0c;package里面的依赖大概有70个&#xff0c;应该勉强算得上是一个中型的React的项目了。下面给大家看看我们现在build一次项目的结果--打包时间约150s&#xff0c;打包完之后的资源gzip之后约1.2m&#…
阅读更多...
搭建本地wordpress

搭建本地wordpress

1.首先&#xff0c;下载xampp&#xff0c;安装按默认勾选即可。 2.安装完成后&#xff0c;启动Apache和MySQL这两个服务。 启动后变成绿色&#xff0c;表示启动成功。 3.点击MySQL项的Admin进入数据库后台。 4.点击用户账户新建用户。 5.填写用户名&#xff0c;host name选本地…
阅读更多...
编写Java批注

编写Java批注

Java 批注的允许的属性类型刻意非常严格&#xff0c;但是允许的类型也可以使用一些简洁的复合批注类型。 考虑教程站点中的示例注释&#xff1a; package annotation; interface ClassPreamble {String author();String[] reviewers(); }在这里&#xff0c;作者和审阅者具有St…
阅读更多...
Python基础【day02】：字符串（四）

Python基础【day02】：字符串（四）

在Python中字符串本身有带很多操作&#xff0c;字符串的特性&#xff0c;不可以被修改 0、字符串常用功能汇总 1、字符串的定义 #定义空字符串>>> name#定义非空字符串 >>> name"luoahong"#通过下标访问 >>> name[1] u#不能修改字符串的值…
阅读更多...
cryptojs vue 使用_VueJs里利用CryptoJs实现加密及解密

cryptojs vue 使用_VueJs里利用CryptoJs实现加密及解密

第一步 安装安装crypto-js第二步 创建在js文件目录下创建一个js文件secret/*** 对页面上输入的密码进行加密传输给后台进行验证&#xff0c;对返回的数据进行解密&#xff0c;在页面展示*/let CryptoJS require(crypto-js); // 引入AES源码jsexport default {/** 对密码进行加…
阅读更多...
最新文章

Copyright @ 2022~2023