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子元素的伸缩性。
Flexbox布局的基本概念的更多相关文章
- flexbox布局神器
前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...
- Flexbox布局(转)
Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的可用显示空间,收缩内容防 ...
- React Native 开发之 (05) flexbox布局
一 flexbox布局 1 flex布局 flexbox是ReactNative 应用开发中必不可少的内容,也是最常用的内容. 传统的页面布局是基于盒子模型,依赖定位属性,流动属性和显示属性来解决. ...
- CSS3之Flexbox布局
CSS3为我们提供了一种可伸缩的灵活的web页面布局方式-flexbox布局,它具有很强大的功能,可以很轻松实现很多复杂布局,在它出现之前,我们经常使用的布局方式是浮动或者固定宽度+百分比来进行布局, ...
- 三分钟学会CSS3中的FLEXBOX布局
原文地址,保护版权,请勿转载:http://page.factj.com/blog/p/2574 这篇文章里我们将学习CSS里flexbox布局的几个最重要的概念,通过学习flexbox布局,你会发现 ...
- 一篇完整的FlexBox布局指南
一篇完整的FlexBox布局指南 转载请标注本文链接并附带以下信息: 译:Cydiacen 作者:CHRIS COYIER 原文:A Complete Guide to Flexbox 原文更新于 2 ...
- Flexbox布局指南
Flexbox布局概念 Flexbox布局( Flexible Box 或CSS3 弹性布局),是CSS3中的一种新的布局模式,是可以自动调整子元素的高和宽,来很好的填充任何不同屏幕大小的显示设备中的 ...
- React Native基础&入门教程:初步使用Flexbox布局
在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击<React Native基础&入门教程:调试React Native应用的一小 ...
- 聊聊Flexbox布局中的flex的演算法
到目前为止,Flexbox布局应该是目前最流行的布局方式之一了.而Flexbox布局的最大特性就是让Flex项目可伸缩,也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Fle ...
随机推荐
- DICOM-RT:放疗流程与參与角色
背景: 放疗是一个复杂的过程,同一时候须要肿瘤医师.模拟定位技师.剂量师.物理师.治疗技师.护士等多重角色參与.总体流程涉及到成像系统.定位系统.计划系统.治疗系统.质控QA系统.信息管理系统等多个独 ...
- 常用DOS下MSC指令
xp:copy C:\WINDOWS\repair\*.* 到 c:\windows\system32\config 2k: copy C:\winnt\repair\*.* 到 c:\winnt\s ...
- app上架的问题
1..p12证书文件(钥匙串导出)开发证书和描述文件的 2.app打包好重Xcode上传到iTunes中的时候最好做校验: 3.程序跑真机出现的问题 解决方法:debug 模式改成release模式 ...
- __sizeof__()
https://bugs.python.org/issue2898 https://bugs.python.org/file10353/footprint.patch Index: Python/sy ...
- Android系统开发入门
Android操作系统 Android是一个基于Linux.使用java作为程序接口的操作系统. 他提供了一些工具,比如编译器.调试器.还有他自己的仿真器(DVM — Dalvik Virtual M ...
- python 将屏幕输出定向到变量中
#!/usr/bin/python # -*- coding: utf-8 -*- import sys import subprocess as sp def main(): cmd = 'syst ...
- Typescript 常见写法
一.Typescript 中数组 let list: number[] = [1, 2, 3]; let list: Array<number> = [1, 2, 3];
- linux静默安装Oracle 11g
./runInstaller -silent -force -responseFile /home/oracle/software/database/response/orcl_install.rsp ...
- SPOJ:Another Version of Inversion(二维数组的逆序对)
DCE Coders admins are way much geekier than they actually seem! Kartik has been following that tradi ...
- 空间数据索引RTree完全解析及Java实现
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/MongChia1993/article/details/69941783 第一部分 空间数据的背景介 ...