看过很多对于弹性盒子flex的简介,但还是觉得阮一峰大神的解析和张鑫旭大神(旧版flex)的解析比较容易理解,下面,我以自己的理解来叙述关于flex弹性布局!

1.概念(容器和项目)

在flex中,有容器和项目之分,但也只是相对的,假如说:div1里面有div2,div2里面有div3,而且他们都被定义为flex盒子:

div1相对于div2来说就是容器,div2相对于div1来说就是项目

div2相对于div3来说就是容器,div3相对于div2来说就是项目

这里的div2,既是容器,也是项目,取决与他的相对位置是谁。

2.对弹性盒子的定义

一般来说,只要父级被定义了display:flex;那么父级元素和里面的子集元素都会被定义为弹性盒子,孙子级别的标签却不会,如果想要成为弹性盒子,则需要在对应的子级元素上定义display:flex;

3.写在容器上的属性

  • flex-direction[row | row-reverse | column | column-reverse]

    • row(默认值):主轴为水平方向,起点在左端。
    • row-reverse:主轴为水平方向,起点在右端。
    • column:主轴为垂直方向,起点在上沿。
    • column-reverse:主轴为垂直方向,起点在下沿。
  • flex-wrap[nowrap | wrap | wrap-reverse]
    • nowrap(默认):不换行
    • wrap:换行,第一行在上方
    • wrap-reverse:换行,第一行在下方
  • flex-flow[<flex-direction> || <flex-wrap>](是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap)
  • justify-content[flex-start | flex-end | center | space-between | space-around]
    • flex-start(默认值):左对齐
    • flex-end:右对齐
    • center: 居中
    • space-between:两端对齐,项目之间的间隔都相等。
    • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
  • align-items[flex-start | flex-end | center | baseline | stretch]
    • flex-start:交叉轴的起点对齐。
    • flex-end:交叉轴的终点对齐。
    • center:交叉轴的中点对齐。
    • baseline: 项目的第一行文字的基线对齐。
    • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
  • align-content[flex-start | flex-end | center | space-between | space-around | stretch]
    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。
    • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
    • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
    • stretch(默认值):轴线占满整个交叉轴。

4.写在项目上的属性

  • order[Number](定义项目的排列顺序。数值越小,排列越靠前,默认为0。)

  • flex-grow[Number](定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。)

  • flex-shrink[Number](定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小)

  • flex-basis[<length> | auto](定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小)

  • flex(是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选)
  • align-self[auto | flex-start | flex-end | center | baseline | stretch]

    • auto:自动
    • flex-start:与交叉轴的起点对齐。
    • flex-end:与交叉轴的终点对齐。
    • center:与交叉轴的中点对齐。baseline :与交叉轴两端对齐,轴线之间的间隔平均分布。
    • stretch(默认值):轴线占满整个交叉轴。

注意:设为 Flex 布局以后,子元素的floatclearvertical-align属性将失效。

(完!)

flex盒子布局的更多相关文章

  1. css3 flex盒子布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. CSS3总结五:弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  3. Flex box 弹性盒子布局

    display: -webkit-flex 标识使用弹性布局 flex: num  占容器的比例   Flex等比划分 导航1 : Flex :1;  导航2  Flex: 2;     ————&g ...

  4. 记一下flex弹性布局

    flex弹性布局也越来越广泛的在我们代码中出现了,更加方便我们的布局.自己用了查,查了用,有些还是记不住,俗话说好脑子不如烂笔头,原来都是写在本子上的,很不幸的一次次的想翻的时候总是找不到,还是写博客 ...

  5. css横向 弹性盒子布局的一些属性

    <head> <meta charset="utf-8"> <meta name="viewport" content=" ...

  6. flex弹性布局的基本介绍

    最近开始做元素排列比较复杂的项目,同时需要各种型号手机的适配,我发现以前所掌握的盒子模型.display.position.float等已经不能满足我的需求了, 于是开始着重学习flex弹性布局并运用 ...

  7. CSS:CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  8. css进阶之二:flex弹性布局

    布局模式是指一个盒子与其兄弟.祖先盒的关系决定其尺寸与位置的算法.css2.1中定义了四种布局模式,分别是块布局.行内布局.表格布局.以及定位布局.css3引入了新的布局模式Flexbox布局,灵活度 ...

  9. 2021年3月-第02阶段-前端基础-Flex 伸缩布局-移动WEB开发_流式布局

    移动web开发流式布局 1.0 移动端基础 1.1 浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器. 移动端常见浏览器:UC浏览器, ...

随机推荐

  1. pytest2-收集与执行测试用例规则

    pytest收集测试用例规则 测试文件以test_开头(以_test结尾也可以) 测试类以Test开头,并且不能带有 init 方法 测试函数以test_开头(以_test结尾也可以) pytest执 ...

  2. Mybaits 源码解析 (二)----- 根据配置文件创建SqlSessionFactory(Configuration的创建过程)

    我们使用mybatis操作数据库都是通过SqlSession的API调用,而创建SqlSession是通过SqlSessionFactory.下面我们就看看SqlSessionFactory的创建过程 ...

  3. python-Debug、函数装饰器

    Debug操作: 程序出问题的时候可以用debug来看一下代码运行轨迹,然后找找问题在哪里 1.先给即将debug的代码打上断点:  2.打完断点之后右键点击debug:  3.然后依次点击开始按钮让 ...

  4. JVM(8) 线程安全与锁优化

    面向过程编程:程序编写以算法为核心,程序员会把数据和过程分别作为独立的部分来考虑,数据代表问题空间的客体,程序代码则用于处理这些数据.这种思维方式直接站在计算机的角度去抽象问题和解决问题,称为面向过程 ...

  5. linux 安装swoole

    1.首先我们要安装swoole扩展的话,需要把它的包下载下来,下载地址是: https://github.com/swoole/swoole-src 2.下载下来之后进行解压: unzip swool ...

  6. 6、pytest -- 临时目录和文件

    目录 1. 相关的fixture 1.1. tmp_path 1.2. tmp_path_factory 1.3. tmpdir 1.4. tmpdir_factory 1.5. 区别 2. 默认的基 ...

  7. 处理echarts用到的数据格式。。。

    1.需求将数据组装: 将typeNumMap中 键为 '1' 的放在数组series 索引为1的data数组中, 将'2'放在索引为2的data数组中,如果 typeNumMap 中没有 对应的 1, ...

  8. Mongo 导出为csv文件

    遇到需要从Mongo库导出到csv的情况,特此记录. 先贴上在mongo目录下命令行的语句: ./mongoexport -h 10.175.54.77 -u userName -p password ...

  9. 第三十一章 System V信号量(二)

    用信号量实现进程互斥示例 #include <unistd.h> #include <sys/types.h> #include <stdlib.h> #inclu ...

  10. winform 数据库资料导出Excel方法(适用于资料数据较多加载慢,不用呈现至DatagridView)

    Private Sub savefile(ByVal dgv2 As DataTable) Dim app As Object = CreateObject("Excel.Applicati ...