Flexbox布局(CSS3 弹性布局,Flexible Box)之 基本概念解析
来源:互联网 发布:红楼梦87版细节知乎 编辑:程序博客网 时间:2024/06/08 18:21
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子元素中将不起作用,比如:float
, clear
, 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-basis
,
flex-grow
和flex-shrink
的缩写,代表flex子元素的伸缩性。
互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。
100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。
- Flexbox布局(CSS3 弹性布局,Flexible Box)之 基本概念解析
- CSS3弹性伸缩布局盒(Flexible Box)模型
- CSS3--弹性布局flexbox
- css3 flexbox layout(弹性布局)完全解析
- CSS3 弹性盒布局说明(CSS3 Flexible Box Layout Explained)
- IE10中的Flexible Box("Flexbox")布局
- flex布局(Flexible Box)
- flexbox-CSS3弹性盒模型flexbox布局完整版教程
- flexbox-CSS3弹性盒模型flexbox布局完整版教程
- css3中 弹性盒模型布局之box-flex
- CSS3之Flexbox布局(一)
- CSS3之Flexbox布局(二)
- flexbox弹性盒子布局
- RN-flexbox(弹性布局)
- flexbox弹性布局
- Flexbox 弹性盒子布局
- Flexbox弹性盒子布局
- 弹性布局FlexBox
- CSS布局十八般武艺都在这里了
- Java实现简单的RPC框架
- java jar 自启动 centos7 systemctl
- Datatables
- 学习笔记--Windows修改emacs文件路径
- Flexbox布局(CSS3 弹性布局,Flexible Box)之 基本概念解析
- Linux & Windows 修改python的pip源
- 修改request中header的值
- 在visual studio2015 C++下配置halcon环境一劳永逸的方法
- antd-mobile中listView遇到的坑
- javascript中的window.location.search和match
- 解读 CSS 布局之水平垂直居中
- DECLARE_MESSAGE_MAP()/BEGIN_MESSAGE_MAP()用法
- MySQL与Oracle数据类型对照表