关于基本布局之——Flex布局
Flex布局
1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上。给div这类块状元素元素设置display:flex
或者给span这类内联元素设置display:inline-flex
,flex布局即创建!
其中,直接设置display:flex
或者display:inline-flex
的元素称为flex容器,里面的子元素称为flex子项。
(flex和inline-flex区别在于,inline-flex容器为inline特性,因此可以和图片文字一行显示;flex容器保持块状特性,宽度默认100%,不和内联元素一行显示。)
2.Flex布局的属性分为两种,即作用域容器上和作用于flex子项上:
作用在flex容器上
|
作用在flex子项上
|
---|---|
|
|
无论作用在flex容器上,还是作用在flex子项,都是控制的flex子项的呈现,只是前者控制的是整体,后者控制的是个体。
子元素的float
、clear
和vertical-align
属性将失效。
作用在flex容器上的CSS属性
1. flex-direction :决定主轴的方向(即项目的排列方向)语法如下:
flex-direction: row | row-reverse | column | column-reverse;
- row:默认值,显示为行。方向为当前文档水平流方向,默认情况下是从左往右。如果当前水平文档流方向是
rtl
(如设置direction:rtl
),则从右往左。 - row-reverse:显示为行。但方向和
row
属性值是反的。 - column:显示为列。
- column-reverse:显示为列。但方向和
column
属性值是反的。
2.flex-warp:用来控制子项整体单行显示还是换行显示,如果换行,则下面一行是否反方向显示。
flex-warp: nowarp | warp | warp-reserve;
- nowarp:默认值,表示单行显示,不换行。
- warp:宽度不足换行显示。
- warp-reserve:宽度不足换行显示,但是是从下往上开始,也就是原本换行在下面的子项现在跑到上面。
3.flex-flow:属性是flex-direction
和flex-wrap
的缩写,表示flex布局的flow流动特性,语法如下:
flex-flow: (flex-direction) || (flex-warp);
当多属性同时使用的时候,使用空格分隔。
4.justify-contet:属性决定了主轴方向的子项的对齐和分布方式。
justify-contet: flex-start | flex-end | center | space-between | space-around | space-evenly;
- flex-start:默认值。与文档流方向相关。默认表现为左对齐。
- flex-end:与文档流方向相反,默认表现为从右向左。
- center:表现为居中对齐。
- space-between:表现为两端对齐,多余的空白间距只在元素中间区域分配。
- space-around:表现为每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
- space-evenly:表现为每个flex子项之间的两侧空白间距完全相等。
5.align-items:属性决定了交叉轴方向的子项的对齐和分布方式
align-items: stretch | flex-start | flex-end | center | baseline;
- stretch:(默认值)flex子项拉伸。如果未设置高度或设为auto,将占满整个容器的高度。
- flex-start:与文档流方向相关。默认表现为容器顶部对齐。
- flex-end:与文档流方向相关,默认表现为容器底部对齐。
- center:表现为与主轴垂直居中对齐。
- baseline:表现为所有flex子项都相对于flex容器的第一行文字基线对齐。
6.align-content:属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly;
作用在flex子项上的CSS属性
1. order:可以通过设置order
改变某一个flex子项的排序位置。(order越小顺序越靠前)
order:integer; (整数值,默认为 0)
2.flex-grow:属性定义项目的放大比例,默认为0;扩展的就是flex子项所占据的宽度,扩展所侵占的空间就是除去元素外的剩余的空白间隙。
flex-grow:number; (默认为 0
3.flex-shrink:属性定义了项目的缩小比例,默认为1;shrink是“收缩”的意思,flex-shrink
主要处理当flex容器空间不足时候,单个元素的收缩比例。
flex-shrink:number; (数值,默认为 1)
例子:现在只给第2个flex子项b元素设置flex:shrink
- 默认为1;则3个子项1:1:1收缩
- 如果为0,则该子项不收缩,按原定大小显示;则b不收缩,剩下2个flex子项等比例收缩;
- 如果为2,则完全收缩尺寸比例分配为1:2:1,b子项收缩的宽度b最大,是其他元素的2倍。
4.flex-basis:定义了在分配剩余空间之前元素的默认大小。(它可以设为跟width
或height
属性一样的值(比如100px),则项目将占据固定空间。)
flex-basisi:<length> | auto; (数值,默认为auto)
- 默认值是
auto
,就是自动。有设置width
则占据空间就是width
,没有设置就按内容宽度来。 - 如果同时设置
width
和flex-basis
,就渲染表现来看,会忽略width
。以下例子设置width:100px, flex-basis:150px;最终显示为150px; - 选择最后一个
flex-basis:240px
会发现flex子项的宽度并不是240px
,因为此时剩余空间不足,3个子项1:1:1收缩的缘故。
5.flex:属性是flex-grow
,flex-shrink
和flex-basis
的缩写。(默认值为 0 1 auto)
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
其中第2和第3个参数(flex-shrink和flex-basis)是可选的。默认值为0 1 auto。
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
6.align-self:指控制单独某一个flex子项的垂直对齐方式,写在flex容器上的这个align-items
属性,后面是items,有个s,表示子项们,是全体;这里是self,单独一个个体。其他区别不大,语法几乎一样。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
唯一区别就是align-self
多了个auto
(默认值),表示继承自flex容器的align-items
属性值。其他属性值含义一模一样。
参考来自:Flex布局教程:语法篇 ;
写给自己看的display:flex布局教程;
关于基本布局之——Flex布局的更多相关文章
- 弹性布局(Flex布局)整理
一. 弹性布局 一个好的网站都有让用户看上去很舒服的布局,一个网站的布局也会或多或少影响到它的浏览量,看完阮大神的博客,就想把弹性布局整理一下. 在平时的我们常用的布局类型有以下几种: 1.浮动+定 ...
- 前端(八)—— 高级布局:文档流、浮动布局、流式布局、定位布局、flex布局、响应布局
高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局 一.文档流 1.什么是文档流 将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质 ...
- cdispaly的Grid布局与Flex布局
cdispaly的Grid布局与Flex布局 Gird 布局与 Flex 布局有一定的相似性,都是对容器的内部项目进行划分. Flex 布局是轴线布局,只能指定项目针对轴线的位置,可以看作成一维布局 ...
- css3弹性伸缩布局(一)—————flex布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案—-Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃而解 ...
- CSS布局之Flex布局
Flex布局,可以简便.完整.响应式地实现各种页面布局. 浏览器支持:得到所有浏览器的支持.(注:Flex布局将成为未来布局的首选方案) 一. Flex布局的概念 Flex是Flexible Bo ...
- 布局方式-flex布局
.弹性盒子 .盒子本来就是并列的 .指定宽度即可 <style> .container { width: 800px; height: 200px; display: flex; bord ...
- CSS3系列:流式(弹性)布局(flex布局)
我的新伸缩盒子.http://www.cnblogs.com/leee/p/5533436.html
- 【前端】移动端Web开发学习笔记【2】 & flex布局
上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
随机推荐
- stm32外部时钟源8M换成12M后库函数相应修改总结
前言 在做“自制继电器上位机控制软件”项目的时候,下位机用到USB虚拟串口,将以前写好的USB虚拟串口程序移植到下位机,发现程序计算机无法识别到虚拟串口STMicroelectronics Virtu ...
- Google老师亲授 TensorFlow2.0实战: 入门到进阶
Google老师亲授 TensorFlow2.0 入门到进阶 课程以Tensorflow2.0框架为主体,以图像分类.房价预测.文本分类等项目为依托,讲解Tensorflow框架的使用方法,同时学习到 ...
- Visio常规图表
包含的就是一些形状模块 比如框图就包含了“方块”以及“具有凸起效果的块”两个形状模版 打开visio 新建的时候选择常规类别 具有透视效果的框图 下面是基本操作: 这是自动调整大小的框 不能调整大小 ...
- Hyperledger Fabric动态配置Raft节点
Hyperledger Fabric动态配置Raft节点 最近看官方文档发现新的共识算法etcdRaft允许动态添加或删除排序节点,所以也花了一天时间操作了以下,写篇文章把整个过程记录一下. 初始网络 ...
- 用WPF实现大数据展示,超炫的效果
开头语 经过一段时间研究,终于实现CS和BS相同效果的大数据展示平台了.首先来看看实现的效果,超炫的效果,客户特别喜欢,个人也非常满意,分享给各位,同大家一起交流学习. 从上图可以看出,分为左中右三栏 ...
- jsp页面中如何让一个输入框内的提示文字是灰色而输入的文字是黑色
<input name="name" type="text" value="提示的文字" size="30" o ...
- Netty堆外内存泄漏排查,这一篇全讲清楚了
上篇文章介绍了Netty内存模型原理,由于Netty在使用不当会导致堆外内存泄漏,网上关于这方面的资料比较少,所以写下这篇文章,专门介绍排查Netty堆外内存相关的知识点,诊断工具,以及排查思路提供参 ...
- $HDOJ5542\ The\ Battle\ of\ Chibi$ 数据结构优化$DP$
$AcWing$ $Description$ $Sol$ 首先显然是是以严格递增子序列的长度为阶段,由于要单调递增,所以还要记录最后一位的数值 $F[i][j]$表示前$i$个数中以$A_i$结尾的长 ...
- vs2017编译installer项目提示缺少visualstudio2010shell(Integrated)-CHN
这个问题折腾我一天,欲仙欲死啊~~~~~~! 国内的网站各种百度,都不行. 还是Google大神比较强,在stackoverflow.com找到了解决方法,说来也简单,难者不会,会者不难! ----- ...
- 「Luogu」[JSOI2007]字符加密 解题报告
题面 思路: 作为一个后缀数组的初学者,当然首先想到的是后缀数组 把\(s\)这个串首尾相接,扩展为原来的两倍,就能按后缀数组的方法处理 证明: 神仙一眼就看出这是后缀的裸题,我这个蒟蒻想了半天想不出 ...