首页 技术 正文
技术 2022年11月19日
0 收藏 873 点赞 4,326 浏览 1055 个字

Flexbox布局的基本概念

flex container(flex容器 或 弹性容器

flex容器是flex元素的的父元素。 通过设置display 属性的值为flex 或 inline-flex定义。

注旧版本的属性值:

  • box:将对象作为弹性容器显示。(最老版本)
  • inline-box:将对象作为内联块级弹性容器显示。(最老版本)
  • flexbox:将对象作为弹性容器显示。(过渡版本)
  • inline-flexbox:将对象作为内联块级弹性容器显示。(过渡版本)

flex item(flex子元素 或 弹性子元素)

flex容器的每一个子元素均为一个flex子元素。注意:felx容器直接包含的文本变为匿名的弹性子元素。

注意:Flexbox布局和原来的布局是2套概念,所以部分css属性在flex子元素中将不起作用,比如:floatclear , vertical-align , column-*

每个flex子元素沿着主轴(main axis)依次相互排列。交叉轴(cross axis)垂直于主轴

  • 属性 flex-direction 定义主轴方向。
  • 属性 justify-content 定义了flex子元素如何沿着主轴排列。
  • 属性 align-items 定义了flex子元素如何沿着交叉轴排列。
  • 属性 align-self 覆盖父元素的align-items属性,定义了单独的flex子元素如何沿着交叉轴排列。

方向

flex容器的主轴起点边缘(main start)主轴终点边缘(main end)和 交叉轴起点边缘(cross start),交叉轴终点边缘(cross end)为flex子元素排列的起始和结束位置。它们具体取决于由writing-mode(从左到右、从右到左等等)属性建立的向量中的主轴和交叉轴位置。

  • 属性 order 将元素依次分组,并决定谁先出现。
  • 属性 flex-flow 是属性 flex-direction 和 flex-wrap 的简写,用于排列flex子元素。

flex子元素根据 flex-wrap 属性控制的侧轴方向(在这个方向上可以建立垂直的新线),既可以是一行也可以是多行排列。

尺寸

flex子元素宽高可相应地等价于主尺寸(main size)交叉尺寸(cross size),它们都分别取决于flex容器的主轴和侧轴。

  •  min-height 和 min-width 属性的初始值为新增关键字 auto。
  • 属性 flex 是 flex-basisflex-grow 和 flex-shrink 的缩写,代表flex子元素的伸缩性。
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:8,983
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,500
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,344
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,127
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,761
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,838