搞定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,一经查实,立即删除!

相关文章

Fiddler抓包使用教程-QuickExec

转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/73468287 本文出自【赵彦军的博客】 在 Fiddler 中自带了一个 QuickExec 命令行,用户可以直接输入并快速执行脚本命令。 常见命令 help 打开官方的使用页面介绍,所有的命令…

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

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

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

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

搭建本地wordpress

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

Python基础【day02】:字符串(四)

在Python中字符串本身有带很多操作,字符串的特性,不可以被修改 0、字符串常用功能汇总 1、字符串的定义 #定义空字符串>>> name#定义非空字符串 >>> name"luoahong"#通过下标访问 >>> name[1] u#不能修改字符串的值…

html5 窗口变形,HTML5画布(变形)

坐标变换案例1&#xff1a;function draw(){var cdocument.getElementById("myCanvas");var cxt c.getContext("2d");cxt.translate(200,50);cxt.fillStylergba(255,0,0,0.25);for(var i0;i<40;i){cxt.translate(25,25);cxt.scale(0.9,0.9);cxt.rotate(…

appium GUI介绍

Appium作为APP端的自动化测试工具&#xff0c;具有很多的有点&#xff0c;今天主要介绍一下它的UI界面&#xff0c;包含其中的一些参数等。主要说的是windows下的APPIUM GUI。 先看一眼它的界面(版本为1.4.16.1) 注: 1.android Settings - Android设置按钮&#xff0c;所有和安…

迭代器模式和Java

大家好&#xff0c;在本文中&#xff0c;我们将检查Iterator Pattern 。 我知道你们中许多人已经使用过一种设计模式&#xff0c;但是也许您没有意识到它是模式&#xff0c;或者不知道它的巨大价值。 根据《 Head First Design 》一书&#xff1a; 迭代器模式提供了一种在不暴…

不使用JavaScript实现菜单的打开和关闭

我在写有菜单栏的网页时&#xff0c;基本都会用响应式设计来适配移动端&#xff0c;例如把不重要的菜单选项隐藏&#xff0c;或者创建一个菜单按钮来控制的菜单的打开和关闭之类的。而我之前一直是使用JavaScript来实现菜单的打开和关闭的&#xff0c;但最近在网上看到有人使用…

芝枝.计算机与人文科学,计算机与人文科学

计算机与人文科学(2013-03-13 13:24:17)标签&#xff1a;文化战争名著《静静的顿河》可以说从它诞生起便没有平静过&#xff0c;围绕它的作者所引起的争议&#xff0c;就像它获得诺贝尔文学奖一样&#xff0c;撼动文坛&#xff0c;有人指控肖洛霍夫是个骗子&#xff0c;《静静的…

HTML5 Canvas游戏开发实战 PDF扫描版

HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧&#xff0c;在介绍HTML5 Canvas相关特性的同时&#xff0c;还通过游戏开发实例深入剖析了其内在原理&#xff0c;让读者不仅知其然&#xff0c;而且知其所以然。在本书中&#xff0c;除…

css3图片垂直居中

图片相对父元素垂直居中, css3属性给父级元素设置 display: -webkit-box; -moz-box-align: center; -webkit-box-align: center; -moz-box-pack: center; -webkit-box-pack: center; 需要注意的是&#xff1a; 父级元素要有确定的高度&#xff01;

网络局域网看不到其它计算机,局域网中看不到其它计算机怎么办

通过网上邻居或查看网络计算机时&#xff0c;看不到局域网中其它计算机&#xff0c;这是怎么回事呢?下面是学习啦小编给大家整理的一些有关看不到局域网中其它计算机的解决方法&#xff0c;希望对大家有帮助!局域网中看不到其它计算机的解决方法打开“控制面板”-“网络和Inte…

计算机二级高级应用考题,2016计算机二级MSOFFICE高级应用考试真题

2016计算机二级MSOFFICE高级应用考试真题离2016上半年的计算机等级考试只有一个多月了&#xff0c;为了帮助大家尽快考试过关&#xff0c;小编整理了计算机二级office考试题&#xff0c;希望能帮助到大家!(1)下列叙述中正确的是A)一个算法的空间复杂度大&#xff0c;则其时间复…

DBMS-数据库设计与E-R模型:E-R模型、约束、E-R图、E-R扩展特性、E-R图转换为关系模式、UML建模...

设计过程概览 1. 设计阶段 最初阶段&#xff1a;刻画未来数据库用户的数据需求&#xff0c;产品为用户需求规格说明&#xff1b; 概念设计阶段&#xff08;conceptual-design phase&#xff09;&#xff1a;&#xff08;关注描述抽象数据及其联系&#xff0c;通常使用实体-联系…

Java虚拟机:如何判定哪些对象可回收?

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请注明出处&#xff0c;欢迎交流学习&#xff01; 在堆内存中存放着Java程序中几乎所有的对象实例&#xff0c;堆内存的容量是有限的&#xff0c;Java虚拟机会对堆内存进行管理&#xff0c;回收已经“死去”的对象&…

css3中的box-sizing属性的使用

box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值&#xff1a;content-box、border-box、inherit。 其中inherit表示box-sizing的值应该从父元素继承。 content-box和border-box的主要区别就是元素的width和height的值包不包括border、padding这两…

中南大学在线考试答案计算机基础,中南大学《计算机基础》在线考试题库(267题)(有答案).doc...

中南大学《计算机基础》在线考试题库(267题)(有答案).doc 计算机基础01 总共89题共100分 一. 单选题 (共35题,共35分) 1. 域名服务器DNS的主要功能是( )。 (1分) A.通过请求及回答获取主机和网络相关的信息 B.查询主机的MAC地址 C.为主机自动命名 D.合理分配IP地址 ★标准答案&…

CSS制作简单loading动画

曾经以为&#xff0c;loading的制作需要一些比较高深的web动画技术&#xff0c;后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈&#xff0c;并不都是将gif图放进去&#xff0c;有些就是画个静止图像&#xff0c;然后让它旋转就完了。gif图也可以&#xff…

机器学习:多变量线性回归

************************************** 注&#xff1a;本系列博客是博主学习Stanford大学 Andrew Ng 教授的《机器学习》课程笔记。博主深感学过课程后&#xff0c;不进行总结非常easy遗忘&#xff0c;依据课程加上自己对不明确问题的补充遂有此系列博客。本系列博客包含线性…