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 ...
随机推荐
- 第05组 Alpha冲刺(4/6)
.th1 { font-family: 黑体; font-size: 25px; color: rgba(0, 0, 255, 1) } #ka { margin-top: 50px } .aaa11 ...
- tigervnc 编译
1.根据BUILDING.txt安装依赖(建议使用默认路径) 其中X11 development kit使用 yum install libX11* 2.修改CMakeList.txt 在前面添加 s ...
- sync_with_stdio(false)和cin.tie(NULL)
std::ios::sync_with_stdio(false) 这个函数相当于是否兼容stdio的开关,默认为true C++为了兼容C,保证程序在使用了std::printf和std::cout的 ...
- 算法学习笔记:Kosaraju算法
Kosaraju算法一看这个名字很奇怪就可以猜到它也是一个根据人名起的算法,它的发明人是S. Rao Kosaraju,这是一个在图论当中非常著名的算法,可以用来拆分有向图当中的强连通分量. 背景知识 ...
- SpringBoot整合MyBatis,HiKari、Druid连接池的使用
SpringBoot整合MyBatis 1.创建项目时勾选mybatis.数据库驱动. mysql驱动默认是8.x的版本,如果要使用5.x的版本,创建后到pom.xml中改. 也可以手动添加依赖 ...
- 手把手教你用思维导图软件iMindMap制作计划表
在日常生活中小编也经常使用思维导图软件iMindMap来创建思维导图以规划工作及学习的安排.尤其是时间安排类型的思维导图,能极大程度的节约我们的时间,接下来就由小编以自己假期的社会实践向大家分享一下怎 ...
- 破解版的OCR文字识别软件,真的好用吗?
很多小伙伴在下载OCR文字识别软件时,会习惯性去找破解版的软件.那么到底什么是破解版的软件呢?其实破解的软件,都是通过非法的手段,破除正版软件的安全权限制作而成的.因此,使用这些破解软件会存在很多安全 ...
- guitar pro系列教程(十二):如何设置Guitar Pro的不完全小节
当我们新建一个GTP谱的时候,我们肯定是要用到节拍,是的,一个乐谱节拍设置的好不好,将直接影响你的乐谱效果好不好,设置节拍的步骤我们之前也有讨论过,今天主要跟大家讲的便是不完全小节. 不完全小节顾名思 ...
- Shell编程规范:Don't use ls | grep
目录 一.背景 二.ShellCheck的规范 三.修改写法 1.ls | grep file 2.ls | grep regexp 3.ls | grep -v multi 四.最后 五.参考 一. ...
- Java IDEA根据database以及脚本代码自动生成DO,DAO,SqlMapper文件(一)
根据数据库代码自动生成的插件挺多的,这里主要分享两种: 1.根据database以及脚本代码自动生成 2.根据mybatis-generator-core自动生成(下一章节进行分享,包含sqlserv ...