CSS基础-Flexbox
flexbox
是一种一维的布局模型,它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。
说 flexbox 是一种一维的布局,是因为一个 flexbox 一次只能处理一个维度上的元素布局,一行或者一列。
作为对比的是另外一个二维布局 CSS Grid Layout,可以同时处理行和列上的布局。
主轴 flex-direction
主轴由 flex-direction
定义,可以取4个值:
row 行
row-reverse 反向行
column 列
column-reverse 反向列
交叉轴垂直于主轴,所以如果你的flex-direction
(主轴) 设成了 row
或者 row-reverse
的话,交叉轴的方向就是沿着列向下的。
Flex 容器
文档中采用了 flexbox 的区域就叫做 flex 容器。
为了创建 flex 容器, 我们把一个容器的 display
属性值改为 flex
或者 inline-flex。
完成这一步之后,容器中的直系子元素就会变为 flex 元素。所有CSS属性都会有一个初始值,所以 flex 容器中的所有 flex 元素都会有下列行为:
- 元素排列为一行 (
flex-direction
属性的初始值是row
)。 - 元素从主轴的起始线开始。
- 元素不会在主维度方向拉伸,但是可以缩小。
- 元素被拉伸来填充交叉轴大小。
flex-basis
属性为auto。
flex-wrap
属性为nowrap。
这会让你的元素呈线形排列,并且把自己的大小作为主轴上的大小。如果有太多元素超出容器,它们会溢出而不会换行。
如果一些元素比其他元素高,那么元素会沿交叉轴被拉伸来填满它的大小。
然后可以根据情况,用flex-direction 更改flex主轴的方向。
接着,用flex-wrap:wrap 实现多行Flex容器。如果您的项目太大而无法全部显示在一行中,则会换行显示。
Flex 容器里->flex 元素上的属性
为了更好地控制 flex 元素,有三个属性可以作用于它们:
flex-grow
flex-shrink
flex-basis
flex-grow
flex-grow
设置了一个flex项主尺寸的flex增长系数。它指定了flex容器中剩余空间的多少应该分配给该项目。
主尺寸是项的宽度或高度,这取决于flex-direction
值。
剩余的空间是flex容器的大小减去所有flex项的大小加起来的大小。如果所有的兄弟项目都有相同的flex-grow系数,那么所有的项目将获得相同的剩余空间,否则将根据不同的flex-grow系数定义的比例进行分配。
flex-grow
与其他的flex属性flex-shrink
和flex-basis
一起使用,通常使用flex
速记来定义,以确保所有的值都被设置。
flex-grow
负值无效。省略时默认值为 1。
flex-shink
flex-shrink
属性是处理flex元素收缩的问题。
flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。
给flex-shrink
属性赋予更大的数值可以比赋予小数值的同级元素收缩程度更大。
flex-basis
flex-basis
指定了 flex 元素在主轴方向上的初始大小。 该属性的默认值是 auto
。
如果所有元素都设定了宽度(width)为100px,所以 flex-basis
的值为100px。
如果没有给元素设定尺寸,flex-basis
的值采用元素内容的尺寸。
语法:
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在flex item内容上的自动尺寸 */
flex-basis: content;
/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
flex属性简写
你可能很少看到 flex-grow
,flex-shrink
,和 flex-basis
属性单独使用,而是混合着写在 flex
简写形式中。
单值语法: 值必须为以下其中之一:
- 一个无单位数(
<number>
): 它会被当作<flex-grow>的值。
- 一个有效的宽度(
width
)值: 它会被当作<flex-basis>的值。
- 关键字
none
,auto
或initial
.
双值语法: 第一个值必须为一个无单位数,并且它会被当作 <flex-grow>
的值。
第二个值必须为以下之一:
- 一个无单位数:它会被当作
<flex-shrink>
的值。 - 一个有效的宽度值: 它会被当作
<flex-basis>
的值。
三值语法:
- 第一个值必须为一个无单位数,并且它会被当作
<flex-grow>
的值。 - 第二个值必须为一个无单位数,并且它会被当作
<flex-shrink>
的值。 - 第三个值必须为一个有效的宽度值, 并且它会被当作
<flex-basis>
的值。
元素间的对齐和空间分配
justify-content
justify-content
属性用来使元素在主轴方向上对齐,
初始值是flex-start
,元素从容器的起始线排列。flex-end
,从终止线开始排列,center
,在中间排列。space-between
,把元素排列好之后的剩余空间拿出来,平均分配到元素之间,元素之间间隔相等。space-around
,使每个元素的左右空间相等。
align-items
align-items
属性可以使元素在交叉轴方向对齐。
这个属性的初始值为stretch
,这就是为什么flex元素会默认被拉伸到最高元素的高度。
实际上,它们被拉伸来填满flex容器 —— 最高的元素定义了容器的高度。
stretch
flex-start
flex-end
center
CSS基础-Flexbox的更多相关文章
- Web开发——CSS基础
参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...
- CSS基础面试题,快来查漏补缺
本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...
- 前端开发:css基础知识之盒模型以及浮动布局。
前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把 ...
- CSS基础总结
CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)
---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...
- css 基础---选择器
1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
随机推荐
- Netlink 内核实现分析 1
Netlink 是一种IPC(Inter Process Commumicate)机制,它是一种用于内核与用户空间通信的机制,在一般情况下,用户态和内核态通信会使用传统的Ioctl.sysfs属性文件 ...
- VS2017新建MVC+ORM中的LinqDb访问数据库项目
1.前提概述 ORM对象关系映射(Object-Relational Mapping)是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言 ...
- Ceph实现数据的'不拆分'
前言 之前看过一个朋友一篇文章,讲述的是Vsan为什么使用的是两副本,而ceph则大多数情况下需要三副本,当时个人观点是这个并不是关键点,但是在仔细考虑了问题的出发点以后,这个也可以说是其中的一个点 ...
- 理解 ASP.NET Core: 处理管道
理解 ASP.NET Core 处理管道 在 ASP.NET Core 的管道处理部分,实现思想已经不是传统的面向对象模式,而是切换到了函数式编程模式.这导致代码的逻辑大大简化,但是,对于熟悉面向对象 ...
- wireshark分析nmap和metasploit内置的syn扫描
syn扫描 syn扫描,根据三次握手,向端口发送syn包,如果对方回应SYN/ACK,则证明端口开放 首先是nmap 速度很快,0.67秒完成,看下wireshark的抓取 一次发送了大量的syn包 ...
- 消灭又臭又长的if-else
背景 由于目前工作岗位的原因,项目还是09年建立的,历史遗留问题也比较多,加上开发规范并不是很完善,项目中有的单个方法达到成百上千行,if-else更是连续写十几个也不累. 作为强迫症真的受不了,另一 ...
- 还不懂java类加载机制的,建议看下这份阿里技术官总结的笔记!
类加载机制 把class文件加载到内存,并对数据进行校验,准备,解析,初始化,形成可以被虚拟机直接使用的字节码 类加载的时机(触发类的初始化) 使用new关键字实例化对象 读取一个类的静态代码块 使用 ...
- FL Studio中的音频剪辑功能讲解
音频剪辑,是FL Studio中的一个特色功能,音频剪辑的目的是保持在播放列表中显示和触发的音频,可以根据需要对它们进行切片和排列.但需要注意的是音频剪辑这个功能在FL Studio的基础版(果味版) ...
- 基于Python+requests搭建的自动化框架-实现流程化的接口串联
框架产生目的:公司走的是敏捷开发模式,编写这种框架是为了能够满足当前这种发展模式,用于前后端联调之前(后端开发完接口,前端还没有将业务处理完毕的时候)以及日后回归阶段,方便为自己腾出学(mo)习(yu ...
- C语言讲义——内存管理
动态分配内存 动态分配内存,在堆(heap)中分配. void *malloc(unsigned int num_bytes); 头文件 stdlib.h或malloc.h 向系统申请分配size个字 ...