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-shrinkflex-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-growflex-shrink,和 flex-basis 属性单独使用,而是混合着写在 flex 简写形式中。

单值语法: 值必须为以下其中之一:

  • 一个无单位数(<number>): 它会被当作<flex-grow>的值。
  • 一个有效的宽度(width)值: 它会被当作 <flex-basis>的值。
  • 关键字 noneautoinitial.

双值语法: 第一个值必须为一个无单位数,并且它会被当作 <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的更多相关文章

  1. Web开发——CSS基础

    参考: 参考:http://css.doyoe.com/ 参考:http://www.w3school.com.cn/cssref/index.asp 参考:https://www.w3cschool ...

  2. CSS基础面试题,快来查漏补缺

    本文大部分问题来源:50道CSS基础面试题(附答案),外加一些面经. 我对问题进行了分类整理,并给了自己的回答.大部分知识点都有专题链接(来源于本博客相关文章),用于自己前端CSS部分的查漏补缺.虽作 ...

  3. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  4. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  5. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  6. HTML5 -入门 (---css样式-------------(css基础与css选择器)---------------------—)

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  7. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  8. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  9. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

随机推荐

  1. Netlink 内核实现分析 1

    Netlink 是一种IPC(Inter Process Commumicate)机制,它是一种用于内核与用户空间通信的机制,在一般情况下,用户态和内核态通信会使用传统的Ioctl.sysfs属性文件 ...

  2. VS2017新建MVC+ORM中的LinqDb访问数据库项目

    1.前提概述 ORM对象关系映射(Object-Relational Mapping)是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言 ...

  3. Ceph实现数据的'不拆分'

    前言 之前看过一个朋友一篇文章,讲述的是Vsan为什么使用的是两副本,而ceph则大多数情况下需要三副本,当时个人观点是这个并不是关键点,但是在仔细考虑了问题的出发点以后,这个也可以说是其中的一个点 ...

  4. 理解 ASP.NET Core: 处理管道

    理解 ASP.NET Core 处理管道 在 ASP.NET Core 的管道处理部分,实现思想已经不是传统的面向对象模式,而是切换到了函数式编程模式.这导致代码的逻辑大大简化,但是,对于熟悉面向对象 ...

  5. wireshark分析nmap和metasploit内置的syn扫描

    syn扫描 syn扫描,根据三次握手,向端口发送syn包,如果对方回应SYN/ACK,则证明端口开放 首先是nmap 速度很快,0.67秒完成,看下wireshark的抓取 一次发送了大量的syn包 ...

  6. 消灭又臭又长的if-else

    背景 由于目前工作岗位的原因,项目还是09年建立的,历史遗留问题也比较多,加上开发规范并不是很完善,项目中有的单个方法达到成百上千行,if-else更是连续写十几个也不累. 作为强迫症真的受不了,另一 ...

  7. 还不懂java类加载机制的,建议看下这份阿里技术官总结的笔记!

    类加载机制 把class文件加载到内存,并对数据进行校验,准备,解析,初始化,形成可以被虚拟机直接使用的字节码 类加载的时机(触发类的初始化) 使用new关键字实例化对象 读取一个类的静态代码块 使用 ...

  8. FL Studio中的音频剪辑功能讲解

    音频剪辑,是FL Studio中的一个特色功能,音频剪辑的目的是保持在播放列表中显示和触发的音频,可以根据需要对它们进行切片和排列.但需要注意的是音频剪辑这个功能在FL Studio的基础版(果味版) ...

  9. 基于Python+requests搭建的自动化框架-实现流程化的接口串联

    框架产生目的:公司走的是敏捷开发模式,编写这种框架是为了能够满足当前这种发展模式,用于前后端联调之前(后端开发完接口,前端还没有将业务处理完毕的时候)以及日后回归阶段,方便为自己腾出学(mo)习(yu ...

  10. C语言讲义——内存管理

    动态分配内存 动态分配内存,在堆(heap)中分配. void *malloc(unsigned int num_bytes); 头文件 stdlib.h或malloc.h 向系统申请分配size个字 ...